1.事件委托 1.1 概念
当页面元素不存在的时候，而此时想先给未知的元素绑定事件，但是单纯的绑定事件又不能触发，那是因为未找到的绑定的对象，所以此时你需要将事件委托给其祖先元素。1.2 例子
//css部分 <link rel="stylesheet" href="https://www.bootcss.com/p/buttons/css/buttons.css"> <style> .button { margin-right: 10px; } </style> //body内的内容 <body> <div class="container"> <button class="button button-primary button-pill button-small">ADD a Button</button> </div> <script src="./js/jquery.js"></script> <script> $(".container").on("click", "button", function () { let bt = $("<button/>").html("ADD a Button").addClass( "button button-primary button-pill button-small"); $(".container").append(bt) }) </script> </body>1.3 例子的运行结果
初始图 点击添加后的结果 2.简易版飞机大战小游戏 2.1 css代码
<style> .container { width: 500px; height: 80vh; margin: 10vh auto; background-color: black; position: relative; overflow: hidden; } .plane { width: 100px; height: 50px; /* background-color: red; */ position: absolute; left: calc(50% - 40px); bottom: 10px; } .bullet { width: 20px; height: 10px; background-color: red; position: absolute; z-index: 99; } .enemy { width: 80px; height: 50px; background: url(./1.png) 0 / 100% 100%; position: absolute; top: 0; } .score { position: absolute; color: red; top: 0px; left: 50%; transform: translateX(-50%); } .stop { font-size: 2px; font-weight: '楷体'; position: absolute; color: red; top: 25px; left: 60%; transform: translateX(-50%); } </style>2.2 html代码
<h1 class="score">0</h1> <div class="stop"> 暂停 </div> <div class="container"> <img src="1.png" alt="" class="plane"> </div>2.3 jQuery代码
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>//引入jq <script> $(function () { $(window).keydown(function ({ keyCode }) { let { left: l, top: t } = $(".plane").position(); let maxleft = $(".container").innerWidth() - $(".plane").innerWidth(); let maxtop = $(".container").innerHeight() - $(".plane").innerHeight(); // console.log(keyCode); switch (keyCode) { case 87: t -= 10; break; case 65: l -= 10; break; case 83: t += 10; break; case 68: l += 10; break; case 74: shoot(); break; case 32: stop(); break; } t < 0 ? t = 0 : false; l < 0 ? l = 0 : false; t > maxtop ? t = maxtop : false; l > maxleft ? l = maxleft : false; $(".plane").css("top", t).css("left", l); }) let endtime = new Date(); // 射击 function shoot() { if (new Date() - endtime < 500) return false; else { $(".container").append($("<div/>").addClass("bullet").css({ top: $(".plane").position().top - 20, left: $(".plane").position().left + ($(".plane").innerWidth() / 2 - $( ".bullet").innerWidth() / 2), })); endtime = new Date(); } } let score = 0; let sign = true; function fun1() { $('.enemy').each(function () { let enemy = this if (calc(enemy, $('.plane').get(0)) || calc($('.plane').get(0), enemy)) { console.log('GG'); location.reload() } $('.bullet').each(function () { let bullet = this; if (calc(enemy, bullet) || calc(bullet, enemy)) { bullet.remove() enemy.remove() score += 10 $('.score').text(score) } // console.log($('.score').html()); }) }) } function fun2() { let enemy = $('<div/>').addClass('enemy') $('.container').append(enemy) enemy.css('left', Math.round(Math.random() * ($('.container').innerWidth() - enemy .innerWidth()))) } function fun3() { $('.enemy').each(function () { let enemy = $(this) let { top } = enemy.position(); // console.log(top); if (top > $('.container').innerHeight()) enemy.remove() else enemy.css('top', enemy.position().top + 20) }) } function fun4() { $(".bullet").each(function () { let bullet = $(this); let { top } = bullet.position(); if (top < 5) bullet.remove(); else bullet.css("top", bullet.position().top - 10); }) } // 检测撞击事件 let cash = setInterval(fun1, 50); // 创建大量敌人 let enem = setInterval(fun2, 2000); // 让敌人由上而下移动 let move_to_bottom = setInterval(fun3, 300); // 子弹 let move_to_top = setInterval(fun4, 100); // 暂停 function stop() { if (sign) { // console.log(sign); $(".stop").html("开始"); clearInterval(cash) clearInterval(enem) clearInterval(move_to_bottom) clearInterval(move_to_top) sign = false; } else { $(".stop").html("暂停"); // 检测撞击事件 cash = setInterval(fun1, 50); // 创建大量敌人 enem = setInterval(fun2, 2000); // 让敌人由上而下移动 move_to_bottom = setInterval(fun3, 300); // 子弹 move_to_top = setInterval(fun4, 100); sign = true; } } // 返回目标的值 function getLTRB(node) { return { l: node.offsetLeft, t: node.offsetTop, r: node.offsetLeft + node.offsetWidth, b: node.offsetTop + node.offsetHeight } } // 检测碰撞 function calc(a, b) { a = getLTRB(a) b = getLTRB(b) if (b.l > a.l && b.l < a.r && b.t > a.t && b.t < a.b) return true else if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return true else if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return true else if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return true else return false } }) </script>