本文目录:
一、事件案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件高级</title> <style> .box { width: 350px; height: 350px; margin: 100px auto 0; } .box div { width: 70px; height: 70px; background-color: yellow; border-radius: 50%; float: left; } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> <script> var divs = document.querySelectorAll(".box div"); // 需要注意的点: 我们需要修改背景颜色, 背景颜色是计算后样式, // 那么getComputedStyle()获取颜色的格式需要手动处理, 而行间式不需要处理, // 且行间式不仅可以设置, 还可以修改 => 将原本计算后样式设置的更改为行间式 // 通过循环利用行间式将所有背景颜色重置 for (let i = 0; i < divs.length; i++) { divs[i].style.backgroundColor = "black"; } // 游戏的实现 for (let i = 0; i < divs.length; i++) { // 循环绑定 (问题: 变量污染) divs[i].onclick = function () { console.log(i) // toggle 颜色 => 抽离出toggle颜色的方法 // 修改自身 toggleBGColor(this); // 修改上下左右, 考虑问题, 不存在的兄弟方位 // 上, 关系i-5, 第一排没有上 i < 5 => 对立面 i >= 5均有上 if (i >= 5) { var topEle = divs[i - 5] toggleBGColor(topEle); } // 下, 关系i+5, 最后一排没有下, 对立面 i < 20 i < 20 && toggleBGColor(divs[i + 5]); // 左, 关系i-1, 第一列没有左, 对立面 i % 5 != 0 i % 5 != 0 && toggleBGColor(divs[i - 1]); // 右, 关系i+1, 最后一列没有右, 对立面 i % 5 != 4 i % 5 != 4 && toggleBGColor(divs[i + 1]); } } function toggleBGColor(ele) { var bgColor = ele.style.backgroundColor; if (bgColor == 'black') { ele.style.backgroundColor = "yellow"; } else { ele.style.backgroundColor = "black"; } } </script> </html>
二、循环绑定之变量污染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>循环绑定</title> </head> <body> <div class="box">0000000000000000001</div> <div class="box">0000000000000000002</div> <div class="box">0000000000000000003</div> </body> <script> var divs = document.querySelectorAll(".box"); /* 存在污染 for (var i = 0; i < divs.length; i++) { // i = 0 | 1 | 2 | 3 // 循环绑定 divs[i].onclick = function () { console.log("***", i) } } // i = 3 console.log(">>>", i); */ /* 利用块级作用域解决 for (let i = 0; i < divs.length; i++) { // {i=0 <= i} {i=1 <= i} {i=2 <= i} // i = 3 // 循环绑定 divs[i].onclick = function () { console.log("***", i) } } // for运行结束, i=3会被销毁 console.log(">>>", i) */ // 利用标签的属性解决 /* for (var i = 0; i < divs.length; i++) { divs[i].index = i; divs[i].onclick = function () { // console.log("###", i) console.log(this.index) } } */ // 利用闭包处理循环绑定 for (var i = 0; i < divs.length; i++) { (function () { var index = i; divs[index].onclick = function () { console.log("###", index) } })() /* (function (index) { divs[index].onclick = function () { console.log("###", index) } })(i) */ /* (function (i) { divs[i].onclick = function () { console.log("###", i) } })(i) */ } </script> </html>
三、事件的绑定与取消
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件的绑定与取消</title> <style> .box { width: 100px; height: 100px; background-color: orange; border-radius: 50%; } </style> </head> <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="begin">开始</div> <div class="event_on1">事件的绑定1</div> <div class="event_on2">事件的绑定2</div> </body> <script> // 每一个box点击都会toggle颜色, 当颜色都变成黑色, 取消所有点击事件, // 点击开始, 重新获得点击事件(所有状态应该重置) var beginBtn = document.querySelector('.begin'); var boxs = document.querySelectorAll('.box'); // 定义一个count计算器,计黑的个数 var count = 0; // 启动服务 beginBtn.onclick = init; // 开始功能 // function beginAction() { // // 让所有box拥有点击事件 // } // box点击切换颜色 function toggleColor() { // console.log(this) if (this.style.backgroundColor == "orange") { this.style.backgroundColor = "black"; count++; } else { this.style.backgroundColor = "orange"; count--; } // 检测是否需要结束 count == 3 && overAction(); } // 结束功能, 取消所有box点击事件 function overAction() { for (var i = 0; i < boxs.length; i++) { boxs[i].onclick = null; } } // 重置功能, 并让所有box拥有点击事件 function init() { for (var i = 0; i < boxs.length; i++) { boxs[i].style.backgroundColor = "orange"; boxs[i].onclick = toggleColor; } // 计算器重置 count = 0; } // 启动服务 // init(); </script> <script> var event_on1 = document.querySelector('.event_on1'); // 事件绑定的第一种方式 event_on1.onclick = function () { console.log(1) }; event_on1.onclick = function () { console.log(2) } // 事件绑定的第二种方式 var event_on2 = document.querySelector('.event_on2'); // 可以为一个元素绑定多个事件, 按绑定顺序依次执行 event_on2.addEventListener('click', function () { console.log("a") }); var action = function () { console.log("b") } event_on2.addEventListener('click', action); // 如何取消事件 event_on2.removeEventListener('click', action) </script> </html>
四、事件对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件对象</title> <style> body { margin: 0; } .box { background-color: pink; } .sup { width: 200px; height: 200px; background-color: red; } .sub { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box">12345</div> <div class="sup"> <div class="sub"></div> </div> <a href="https://www.baidu.com">只想相应点击事件</a> </body> <script> var box = document.querySelector('.box'); // 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象 box.onclick = function (ev) { // 回调函数 console.log(ev) // 特殊按键 altKey | shiftKey | ctrlKey console.log(ev.altKey) // 鼠标的点击点 console.log(ev.clientX, ev.clientY) } </script> <script> var sup = document.querySelector('.sup'); var sub = document.querySelector('.sub'); // 事件默认有冒泡, 子级相应事件后,会将事件传递给父级,如果父级有相同事件,也会被激活, 最终传递给document sub.onclick = function (ev) { console.log(ev); // 取消冒泡, 当自身处理事件后, 该事件就处理完毕, 结束, 不再向上传递 ev.cancelBubble = true; console.log("子级被点击了") }; sup.onclick = function () { console.log("父级被点击了") }; document.onclick = function () { console.log("文档被点击了") } </script> <script> // 默认事件 var aBtn = document.querySelector('a'); aBtn.onclick = function (ev) { ev.cancelBubble = true; console.log("a被点击了"); // 手动转跳页面 open('https://www.oldboyedu.com', '_self'); // a标签默认会完成转跳, 如果取消默认事件 return false; } </script> </html>