“DOM2级事件”定义了两个方法，
用于处理指定和删除事件处理程序的操作：
addEventListener()removeEventListener()
一. addEventListener()和removeEventListener()
所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：
要处理的事件名(例如：
click、focus等。 如意这里写事件名字的时候 不能带on)作为事件处理程序的函数
一个布尔值, 是否在捕获阶段处理事件。最后这个布尔值参数如果是
true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
<body>
<button id="btn">点我或双击我</button>
<br/></br/>
<button id="cacelBtn1">点我取消单击事件</button>
<br/></br/>
<button id="cacelBtn2">点我取消双击事件</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
//定义事件处理程序。
function handler (event) {
if(event.type == "click"){ // 根据事件的类型不同，进行不同的处理
console.log("你单击了我");
}else if(event.type = "dbclick"){
console.log("你双击我了我");
}
}
//给click事件注册监听器
btn.addEventListener("click", handler, false);
//给dblclick事件注册监听器
btn.addEventListener("dblclick", handler, false);
var cancelBtn1 = document.getElementById("cacelBtn1");
var cancelBtn2 = document.getElementById("cacelBtn2");
//点击这个按钮把第一个按钮的单击事件移除
cancelBtn1.onclick = function () {
btn.removeEventListener("click", handler, false);
}
//点击这个按钮把第一个按钮的双击事件移除
cancelBtn2.onclick = function () {
btn.removeEventListener("dblclick", handler, false);
}
</script>
</body>
1.2 一些注意点
可以给一个元素多次添加同一个事件的多个处理程序，那么浏览器会按照添加的顺序顺序执行。
<body>
<button id="btn">点我或双击我</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
//使用匿名函数给click事件添加第一个处理程序
btn.addEventListener("click", function () { //先注册先执行
alert("第一次hell");
}, false);
//使用匿名函数给click事件添加第二个处理程序
btn.addEventListener("click", function () { //后注册后执行
alert("第二次hello");
}, false);
//这两个事件处理程序都会执行，顺序为添加(注册)顺序:
</script>
</body>
- 移除监听器(处理程序)的时候，必须和注册时使用的是同一个函数。否则移除失败
- 比如：如果注册和移除都是使用的匿名函数，那么一定会移除不起作用
<body>
<button id="btn">点我或双击我</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
//使用匿名函数添加事件处理程序
btn.addEventListener("click", function () {
alert("欢迎来到xyxyxy");
}, false);
// 移除使用的处理程序虽然和注册的处理程序代码一样，但是因为两次都是用的匿名函数，所以
// 两次用的肯定不是同一个函数。所以移除不起作用。
btn.removeEventListener("click", function () {
alert("欢迎来到xyxyxy");
}, false);
</script>
</body>
注意：
大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。==如果不是特别需要，不建议在事件捕获阶段注册事件处理程序==。
IE9、Firefox、Safari、Chrome和 Opera 支持 DOM2 级事件处理程序。( ie9以前不支持 )