一、addEventListener() 方法
（先上实例）
"demo">
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>Documenttitle>
<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);
}
