JavaScript要点（十三） HTML DOM EventListener
addEventListener() 方法
1 <body> 2 3 <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> 4 <button id="myBtn">点我</button> 5 <p id="demo"></p> 6 <script> 7 document.getElementById("myBtn").addEventListener("click", displayDate); 8 function displayDate() { 9 document.getElementById("demo").innerHTML = Date(); 10 } 11 </script> 12 13 </body>
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
💡注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
向原元素添加事件句柄
1 <body> 2 3 <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> 4 <button id="myBtn">点我</button> 5 <script> 6 document.getElementById("myBtn").addEventListener("click", function(){ 7 alert("Hello World!"); 8 }); 9 </script> 10 11 </body>
你可以使用函数名，来引用外部函数:
1 <body> 2 3 <p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p> 4 <button id="myBtn">点我</button> 5 <script> 6 document.getElementById("myBtn").addEventListener("click", myFunction); 7 function myFunction() { 8 alert ("Hello World!"); 9 } 10 </script> 11 12 </body>
向同一个元素中添加多个事件句柄
🌰
addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：
<body> <p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p> <button id="myBtn">点我</button> <script> var x = document.getElementById("myBtn"); x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); function myFunction() { alert ("Hello World!") } function someOtherFunction() { alert ("函数已执行!") } </script> </body>
🌰🌰
你可以向同个元素添加不同类型的事件： <body> <p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p> <button id="myBtn">点我</button> <p id="demo"></p> <script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("demo").innerHTML += "Moused over!<br>" } function mySecondFunction() { document.getElementById("demo").innerHTML += "Clicked!<br>" } function myThirdFunction() { document.getElementById("demo").innerHTML += "Moused out!<br>" } </script> </body>
向 Window 对象添加事件句柄
1 <body> 2 3 <p>实例在 window 对象中使用 addEventListener() 方法。</p> 4 <p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p> 5 <p id="demo"></p> 6 <script> 7 window.addEventListener("resize", function(){ 8 document.getElementById("demo").innerHTML = Math.random(); 9 }); 10 </script> 11 12 </body>
传递参数
1 当传递参数值时，使用"匿名函数"调用带参数的函数：
2 <body> 3 4 <p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p> 5 <p>点击按钮执行计算。</p> 6 <button id="myBtn">点我</button> 7 <p id="demo"></p> 8 <script> 9 var p1 = 5; 10 var p2 = 7; 11 document.getElementById("myBtn").addEventListener("click", function() { 12 myFunction(p1, p2); 13 }); 14 function myFunction(a, b) { 15 var result = a * b; 16 document.getElementById("demo").innerHTML = result; 17 } 18 </script> 19 20 </body>
❗️DOM事件流：事件冒泡或事件捕获
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
💡useCapture：默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>栗子</title> 6 <style> 7 div { 8 background-color: coral; 9 border: 1px solid; 10 padding: 50px; 11 } 12 </style> 13 </head> 14 <body> 15 16 <p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p> 17 <div id="myDiv"> 18 <p id="myP">点击段落，我是冒泡。</p> 19 </div><br> 20 <div id="myDiv2"> 21 <p id="myP2">点击段落，我是捕获。 </p> 22 </div> 23 <script> 24 document.getElementById("myP").addEventListener("click", function() { 25 alert("你点击了 P 元素!"); 26 }, false); 27 document.getElementById("myDiv").addEventListener("click", function() { 28 alert(" 你点击了 DIV 元素 !"); 29 }, false); 30 document.getElementById("myP2").addEventListener("click", function() { 31 alert("你点击了 P2 元素!"); 32 }, true); 33 document.getElementById("myDiv2").addEventListener("click", function() { 34 alert("你点击了 DIV2 元素 !"); 35 }, true); 36 </script> 37 38 </body> 39 </html>
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);
💡注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function); element.detachEvent(event, function);
1 <body> 2 3 <p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p> 4 <p>该实例演示了所有浏览器兼容的解决方法。</p> 5 <button id="myBtn">点我</button> 6 <script> 7 var x = document.getElementById("myBtn"); 8 if (x.addEventListener) { 9 x.addEventListener("click", myFunction); 10 } else if (x.attachEvent) { 11 x.attachEvent("onclick", myFunction); 12 } 13 function myFunction() { 14 alert("Hello World!"); 15 } 16 </script> 17 18 </body>
