本文详解JavaScript中addEventListener与removeEventListener的用法。介绍事件冒泡与捕获机制及第三个布尔参数的作用。重点说明通过该方法添加的事件只能通过同名函数引用移除，匿名函数无法移除，并提供正确移除事件处理程序的代码示例。
addEventListener与removeEventListener基础用法
本文通过具体案例解析JavaScript中addEventListener()与removeEventListener()的使用方法及注意事项。
所有DOM节点均具备addEventListener()和removeEventListener()方法，分别用于绑定和移除事件监听器。
这两个方法接收三个参数：事件名称、事件处理函数以及一个布尔值。
第三个布尔参数用于指定事件触发的阶段：设为true表示在捕获阶段调用处理程序，设为false（默认值）表示在冒泡阶段调用。
事件冒泡与捕获机制解析
事件传播机制包含两种模式：冒泡（Bubbling）和捕获（Capturing）。
事件传播顺序决定了元素事件触发的先后次序。例如，当<p>元素嵌套在<div>元素内部时，点击<p>元素会触发哪个元素的click事件？
在冒泡模式下，事件从最内层的元素开始触发，随后向父级元素传播。即<p>元素的点击事件先触发，接着触发<div>元素的事件。
在捕获模式下，事件从最外层的元素开始触发，随后向子级元素传播。即<div>元素的点击事件先触发，随后触发<p>元素的事件。
以下代码演示如何在按钮上添加点击事件监听器：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
多事件处理程序绑定与移除陷阱
使用DOM2级事件模型的主要优势在于支持为同一元素绑定多个事件处理程序。示例如下：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.addEventListener("click", function () {
alert("Hello World");
}, false);
通过addEventListener()添加的事件处理程序，必须使用完全相同的参数调用removeEventListener()才能移除。若添加的是匿名函数，则无法通过removeEventListener()移除，因为每次定义的匿名函数都是不同的对象实例。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
alert(this.id);
}, false);
在上述示例中，由于removeEventListener()传入的函数与addEventListener()中的函数并非同一引用（内存地址不同），导致移除操作无效。
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！正确移除事件处理程序的案例如下：
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
<p>点击按钮移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
读者可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码的实际运行效果。
如需了解更多JavaScript相关知识，可参考本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》。
希望本文的解析对掌握JavaScript事件处理机制有所帮助。