标签：
通过指定事件处理程序可以侦听事件的发生并对其作出响应，已达到某种交互目的。那么指定事件处理程序的方式有哪些呢？
比如有以下代码：
<input id="btn" type="button" value="click me" />
要求为按钮指定一个单击事件处理程序，即单击按钮时输出相应信息。
1.HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。特性的值可以是能够执行的js代码。
<input id="btn" value="click me" onclick="alert(‘clicked‘)" />
也可以调用在页面其他地方定义的脚本。
<script type="text/javascript">
function showMessage(){
alert("clicked");
} </script>
<input id="btn" value="click me" onclick="showMessage()" />
showMessage()这个函数可以向以上方式定义，也可以被包含在一个外部文件中。事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。
缺点：
<input type="button" value="click me" onclick="try{showMessage();}catch(ex){}"/>
2.DOM0级事件处理程序
通过JavaScript指定处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。每个元素（包括document和window）都有自己的事件处理程序属性，这些属性通常全部小写，如onclick。
var btn = document.getElementById("btn"); //指定事件处理程序 btn.onclick = function(){ alert("Clicked"); }; //想要取消事件处理程序的话，只需将事件处理程序属性设为null即可 btn.onclick = null;
这种方式下指定的事件处理程序被认为是元素的方法，所以其作用域为元素的作用域。即程序中的this引用当前元素。如：
btn.onclick=function(){ alert(this.id);//btn }
另外以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
3.DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有的DOM节点都包含着两个方法，并且它们都接受三个参数：要处理的事件名、事件处理程序的函数和一个布尔值。其中布尔值为true表示在捕获阶段调用事件处理程序，为false表示在冒泡阶段调用事件处理程序。
//指定事件处理程序 btn.addEventListener("click",fucntion(){alert("clicked");},false); //取消事件处理程序 btn.removeEventListener("click",function(){alert("clicked");},false);//无效 //指定和取消的参数必须完全相同才有效。而匿名函数是两个不同的函数，所以无效 //所以为了能够取消，最好函数采用命名函数
var handler = function(){ alert("clicked"); }; //添加事件处理程序 btn.addEventListener("click",handler,false); //取消事件处理程序 btn.removeEventListener("click",handler,false);//有效
作用域与DOM0级事件指定事件处理程序的作用域相同，也是元素的作用域。但与DOM0不同的是，DOM2可以指定多个事件处理程序。
事件处理程序的触发顺序是按照添加事件处理程序的顺序来的。
支持DOM2级事件处理程序的浏览器有IE9+、Firefox、Safari、Chrome和Opera。
4.IE事件处理程序
IE实现了与DOM类似的两种方法：attachEvent()和detachEvent()。接受两个参数：事件处理程序名与事件处理程序函数。IE8-只支持事件冒泡，所以通过attachEvent()添加的事件处理程序被添加到事件冒泡阶段。
//添加事件处理程序 btn.attachEvent("onclick",handler); //取消事件处理程序 btn.detachEvent("onclick",handler); //取消参数必须与添加完全相同，所以事件处理程序函数(同DOM2级事件中的分析一样)不要是匿名函数。
IE事件处理程序与DOM事件处理程序的最大区别：DOM0/2级事件处理程序的作用域是元素作用域；而IE事件处理程序是全局作用域，即this等于widow。
IE也可以指定多个事件处理程序，我运行了相关代码发现：触发顺序同添加顺序（IE9）；而《JavaScript高级程序设计》中说触发顺序应该同添加顺序相反。到底是哪个，暂时不清楚。。
支持IE事件处理程序的浏览器有IE和Opera。
5.跨浏览器的事件处理程序
//跨浏览器的事件处理程序 恰当的使用能力检测即可实现 //要保证事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段 //第一个要创建的方法是addHandler()，职责是视情况分别使用DOM0级方法、DOM2级方法 //或IE方法来添加事件。这个方法属于一个名叫EventUtil的对象。 //接受三个参数：要操作的元素、事件名称和事件处理程序函数 //removeHandler() 也接受相同的参数。职责是移除之前添加的事件处理程序-无论该事件采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0级方法 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.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type] = null; } } }; var handler = function(){ alert("Clicked"); }; //指定 EventUtil.addHandler(btn,"click",handler); //移除事件处理程序 EventUtil.removeHandler(btn,"click",handler); //注意 以上的addHandler()和removeHandler()没有考虑到所有的浏览器问题，例如IE中的作用域问题 //不过，使用它们添加和移除事件处理程序还是足够了。此外还要注意，DOM0级对每个事件支持一个事件处理程序。 //好在，只支持DOM0级的浏览器已经没那么多了。
标签：
原文地址：http://www.cnblogs.com/huangyx/p/4761624.html
