1、DOM0级事件处理程序 将一个函数值给一个事件处理程序属性。 例如： 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.onclick = funtion(){ alert(this.id); //"myBtn" } 删除事件，btn.onclick = null; -------------------------------------------------------------------------------- 2、DOM2级事件处理程序 先介绍，“DOM2级事件”定义的两个方法，用于处理指定和删除事件处理程序的操作： addEventListener() removeEventListener() 所有DOM节点都包含这两个方法，接受3个参数：处理事件名、作为事件处理程序的函数、一个布尔值。 最后的布尔值参数，true：表示在捕获阶段调用事件处理程序；false：表示在冒泡阶段调用事件处理程序。 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.addEventListener("click",funciton(){ alert(this.id); },false); 用DOM2级方法添加事件处理程序主要的好处是可以添加多个事件处理程序。 例如： 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.addEventListener("click",funciton(){ alert(this.id); },false); btn.addEventListener("click",funciton(){ alert(“Hello World！”); },false); 这两个事件会按照顺序触发。 通过 addEventListener()添加的事件只能用removeEventListener()移除。移除时传入的参数需与添加时的参数一致，也就是说匿名函数将无法移除。 复制代码 代码如下: var btn = document.getElementById("myBtn"); var handler = function(){ alert(this.id); }; btn.addEventListener("click" , handler , false); btn.removeEventListener("click", handler , false); 大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，以便兼容各种浏览器。 firefox、safari、chrome、opera支持DOM2级事件处理程序。 -------------------------------------------------------------------------------- 3、IE事件处理程序 IE实现了与DOM中类似的两个方法： attachEvent() detachEvent() 这两个方法都接受两个参数：事件处理程序名称和事件处理程序函数。 由于IE只支持时间冒泡，所以通过attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。 例如： 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.attachEvent("onclick" , function(){ alert("Clicked"); }) 注意，attachEvent()的第一个参数是“onclick”,而非 “click”。 IE的attachEvent()与DOM0的addEventListener()的主要区别是事件处理程序的作用域。 DOM0级方法，事件处理程序会在所属元素的作用域内运行； attachEvent()方法，事件处理程序会在全局作用域中运行，因此 this等于 window。 attachEvent()也可以为一个元素添加多个事件处理程序。 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.attachEvent(”onclick“ , function(){ alert("clicked"); }) btn.attachEvent(”onclick“ , function(){ alert("Hello World!"); }) 与DOM方法不同的是，这些事件处理程序不是以添加顺序执行，而是以相反的方向执行。 detachEvent() 的用法与removeEventListener()的用法一样。 -------------------------------------------------------------------------------- 4、跨浏览器的事件处理程序 复制代码 代码如下: 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 { element["on" + type] = handler; } }, removeHandler: function( element , type , handler){ if ( element.removeElementListener) { element.removeElementListener( type , handler , flase); } else if ( element.detachEvent) { element.detachEvent ( "on" + type , handler) } else { element["on" + type] = handler; } } }

　　推荐阅读

　　JavaScript中的作用域链和闭包

作用域 全局作用域 局部作用域 作用域链 执行上下文 活动对象 闭包 闭包优化 JavaScript中出现了一个以前没学过的概念——闭包。何为闭包？从表面理解即封闭的包，与作用域有关。所以，说闭包以前先说说作用域。 作>>>详细阅读

本文标题：javascript 事件处理程序介绍

地址：http://www.17bianji.com/kaifa2/JS/23269.html

 1/2    1