19event-listener.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="btn">按钮</button> <script src="../../01-ES/code/tool.js"></script> <script> var btn = document.getElementById("btn"); // 注册事件 /* 第一种 无法给同一个对象注册多个事件处理函数 btn.onclick = function() { alert(123); } btn.onclick = function() { alert(456); // 移除事件 btn.onclick = null; } */ function fn() { alert(123); // 移除事件 //btn.removeEventListener("click",fn); removeEventListener(btn,"click",fn); } btn.addEventListener("click",fn); /* 第二种 兼容Ie9+ btn.addEventListener("click",function() { alert(123); }); btn.addEventListener("click",function() { alert(456); }); //第三种 attachEvent ie6-10 第一个参数 表示事件名称需要加on btn.attachEvent("onclick",function() { alert(456); }); */ // 封装一个函数 对元素注册事件 function addEventListener(ele,eventName,fn) { // 能力检测 if(ele.addEventListener) { ele.addEventListener(eventName,fn); } else if(ele.attachEvent) { ele.attachEvent("on"+eventName,fn); } else { ele["on"+eventName] = fn; } } /*addEventListener(btn,"click",function() { alert(123); }); addEventListener(btn,"click",function() { alert(456); }); */ function fn2() { alert(456); btn.detachEvent("onclick",fn2); } //btn.attachEvent("onclick",fn2); </script> </body> </html>
20event-bubble.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } div>p { height: 50px; background: #00f; } </style> </head> <body> <div> <p>123456</p> </div> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>杭州</li> <li>广州</li> </ul> <script> /* var oDiv = document.querySelector("div"); var oP = document.querySelector("p"); // // 第三个参数为false表示冒泡 oDiv.addEventListener("click",function() { console.log("div "); },false); oP.addEventListener("click",function() { console.log("p"); },false); document.addEventListener("click",function() { console.log("document "); },false); window.addEventListener("click",function() { console.log("window "); },false);*/ /* 第三个参数为true表示捕获 oDiv.addEventListener("click",function() { console.log("div2 "); },true); document.addEventListener("click",function() { console.log("document2 "); },true); window.addEventListener("click",function() { console.log("window2 "); },true); */ // 事件分为三个阶段 /* 1 捕获阶段 一般没什么意义 2 执行当前点击的元素 3 冒泡阶段 ** */ /* window window | | document document | | div div | | P */ // 事件委托 原理利用事件冒泡 document.getElementsByTagName("ul")[0].onclick = function(e) { //console.log(e.target);// 真正触发事件的对象 e.target.style.background = "green"; } /* window window | document document | | body body | | ul ul | li */ </script> </body> </html>
21preventDefault.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box1 { width: 200px; height: 200px; background-color: red; } #box2 { width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <a href="https://www.baidu.com" id="link">去百度</a> <div id="box1"> <div id="box2"> </div> </div> <script> var link = document.getElementById("link"); link.onclick = function(e) { alert(123); var e = e || event; /* e.preventDefault(); // 取消默认行为 标准dom方法 e.returnValue = false;// IE低版本 */ return false; } var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var arr = [box1,box2]; // onclick注册事件 只有冒泡 attachEvent 只有冒泡 for(var i=0; i<arr.length; i++) { arr[i].onclick = function(e) { console.log(this.id); e.stopPropagation(); // 标准dom e.cancelBubble = true; //ie低版本 } } </script> </body> </html>