## 10.2 事件处理程序 响应某个事件的函数就叫做**事件处理程序（或事件侦听器）**。 ### 10.2.1 HTML事件处理程序 某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名 HTML特性来指定。 在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。 特点： * 创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，即事件对象。通过event变量，可以直接访问事件对象。在函数内部，this值等于时间的目标元素。 * 扩展作用域的方式：在函数内部，可以像访问局部变量一样访问document及该元素本身的成员。 缺点： * 存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。 * 扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。 * HTML与JavaScript代码紧密耦合。 ### 10.2.2 DOM0级事件处理程序 通过JavaScript指定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。 每个元素（包括window和document）都有自己的事件处理程序。 删除可设置，如`btn.onclick = null；` ### 10.2.3 DOM2级事件处理程序 “DOM2级事件”定义了两个方法，用于处理指定和删除时间处理程序的操作：`addEventListener()和removeEventListener()`。所有节点中都包含这两个方法，并且接受3个参数：要处理的事件名（前头无on）、作为事件处理程序的函数和一个布尔值（true表示在捕获阶段调用时间处理程序，false表示在冒泡阶段调用。） ~~~ var btn = document.getElementById("mybtn"); btn.addEventListener("click",function(){ alert(this.id); },false); //多数为false，最大限度兼容各种浏览器。 ~~~ 通过addEventListener()添加的事件处理程序**只能**使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着**添加的匿名函数将无法移除，建议传入函数名。** ### 10.2.4 IE事件处理程序 IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。两个方法接受相同的两个参数：事件处理程序名称（前缀on）与事件处理程序函数。 添加多个事件出程序时，按添加的相反顺序被处罚。 添加的匿名函数也将不能被移除。 ### 10.2.5 跨浏览器的事件处理程序 ~~~ var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler，false); } else if (element.attachEvent) { element.attachEvent('on' + type, handler); } else if (element != window) { element['on' + type] = handler; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler， false); } else if (element.detachEvent) { element.detachEvent('on' + type, handler); } else if (element != window) { element['on' + type] = null; } } }; var btn = document.getElementById("mybtn"); var handler = function(){ alert("Clicked"); }; EventUtil.addHandler(btn,"click",handler); EventUtil.removeHandler(btn,"click",handler); ~~~