一、addEventListener() 方法
（先上实例）
<button id="btn">点我</button> <p id="demo"></p> <script> document.getElementById("btn").addEventListener("click",displayDate); function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script>
addEventListener() 方法用于向指定元素添加事件句柄
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄
====小技巧：可以使用 removeEventListener() 方法来移除事件的监听
二、向原元素添加事件句柄
①实例1：（可以直接在内部对函数进行定义）
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> <button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click",function(){ alert("hahahhzy!"); }) </script>
三、向同一个元素中添加多个事件句柄
===addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件
<button id="Btn">点我</button> <p id="demo"></p> <script> document.getElementById("Btn").addEventListener("click",myFunction1); document.getElementById("Btn").addEventListener("click",myFunction2); function myFunction1(){ alert("1"); } function myFunction2(){ alert("2"); } </script>
====可以向同个元素添加不同类型的事件
四、向 Window 对象添加事件句柄
实例1：当用户重置窗口大小时添加事件监听，这就是对resize进行重置事件监听了
（这个打开的时候，是不会看到数字的，要缩放一下页面触发了我们定义的事件，才可以看到任意产生的数字的）
<p>实例在 window 对象中使用 addEventListener() 方法。</p> <p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p> <p id="demo"></p> <script> window.addEventListener("resize",function(){ document.getElementById("demo").innerHTML=Math.random(); }) </script>
五、给添加时间句柄 传递参数
===当传递参数值时，使用"匿名函数"调用带参数的函数
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p> <p>点击按钮执行计算。</p> <button id="myBtn">点我</button> <p id="demo"></p> <script> var p1=5; var p2=7; document.getElementById("myBtn").addEventListener("click",function(){ myFunction(p1,p2); }); function myFunction(a,b){ var result=a*b; document.getElementById("demo").innerHTML=result; } </script>
六、事件冒泡或事件捕获
哪个元素的 "click" 事件先被触发呢？冒泡的话就是内部的事件会想被触发的，捕获的话就是外部的元素先被触发
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递
addEventListener(event, function, useCapture);
七、removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #Div{ background-color: coral; border: 1px solid; padding: 50px; color: white; } </style> </head> <body> <div id="Div"> <button onclick="removeFunction()">点我</button> </div> <p id="demo"></p> <script> document.getElementById("Div").addEventListener("mousemove",myFunction); function myFunction(){ document.getElementById("demo").innerHTML=Math.random(); } function removeFunction(){ document.getElementById("Div").removeEventListener("mousemove",myFunction); } </script> </body> </html>
注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.detachEvent(event, function);
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
