通过 addEventListener() 添加的事件处理程序只能使用 removeEventListener() 移除！移除时传入的参数必须与添加时的参数相同。这也就意味着通过 addEventListener() 添加的匿名函数将无法被移除：
var handler = function () { console.log("Hi deniro"); }; btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false);//移除成功
大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容浏览器。所以如果不是特别需要，请不要在事件捕获阶段注册事件处理程序。
注意： IE9、Firefox、Safari、Chrome 和 Opera 支持 DOM2 级事件处理程序。
4 IE 事件处理程序
IE 实现了与 DOM 类似的方法：attachEvent() 和 detachEvent()。它们接受两个参数：事件处理程序名称和事件处理程序函数。因为 IE8 及早期版本只支持事件冒泡，所以使用 attachEvent() 添加的事件处理程序会被添加到冒泡阶段。
这样为按钮添加一个事件处理程序：
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { });
IE 的 attachEvent() 与 DOM0 级方法的区别是事件处理程序的作用域不同。 DOM0 级方法中，事件处理程序会在其所属元素的作用域内运行；而使用 attachEvent() ，事件处理程序会在全局作用域中运行，所以 this 等于 window：
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { console.log("Clicked"); console.log(this === window);//true;this 为全局作用域 });
也可以为一个元素添加多个事件处理程序：
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { console.log("Clicked"); console.log(this === window);//true;this 为全局作用域 }); //IE10 中多个事件是按照事件定义的顺序执行 btn.attachEvent("onclick", function () { console.log("Hello world!"); });
IE8 及之前的版本，是以添加它们的相反顺序进行，IE9 修复了这个问题。
可以通过 detachEvent() 来移除添加的事件处理程序，但必须提供相同的参数。所以它也不能移除之前通过匿名函数添加的事件处理程序。只要能够将对相同函数的引用作为参数，就可以移除添加的事件处理程序咯：
<button>点我</button> <script type="text/javascript"> var btn = document.getElementById("myBtn"); var handler = function () { console.log("Clicked"); } btn.attachEvent("onclick", handler); btn.detachEvent("onclick", handler); </script>
注意： IE 和 Opera 支持 IE 事件处理程序。
5 跨浏览器的事件处理程序
只要恰当地运用能力检测，就能写出跨浏览器的事件处理程序。
var EventUtil = { /** * 添加事件 * @param element 要操作的元素 * @param type 事件名称 * @param handler 事件处理函数 */ addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, /** * 移除事件 * @param element 要操作的元素 * @param type 事件名称 * @param handler 事件处理函数 */ removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } } }
这样使用：
<button>点我</button> <script type="text/javascript" src="https://www.jb51.net/EventUtil.js"/> <script type="text/javascript"> var btn = document.getElementById("myBtn"); var handler = function () { console.log("Clicked"); } EventUtil.addHandler(btn, "click", handler); EventUtil.removeHandler(btn, "click", handler); </script>
还有一点，DOM0 级对每一个事件只支持一个事件处理程序，好在现在只支持 DOM0 级事件处理程序的浏览器几乎已经没有咯，所以不用担心啦 O(∩_∩)O~
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》