一、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.attachEvent(event, function);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);
}