事件指定事件处理程序的方法主要有3种。1、html事件处理程序：首先，这种方法已经过时了；2、dom0级事件处理程：这种方法简单而且跨浏览器，但是只能为一个元素添加一个事件处理函数；3、dom2级事件处理程序：dom2级事件处理程序可以为一个元素添加多个事件处理程序。
一、事件处理程序
前面提到，事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序（也叫事件处理函数、事件句柄）。事件处理程序的名字以on开头，因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。
为事件指定事件处理程序的方法主要有3种。
1、html事件处理程序
首先，这种方法已经过时了。因为动作(javascript代码)和内容(html代码)紧密耦合。但是写个小demo的时候还是可以使用的。
这种方式也有两种方法，都很简单：
第一种：直接在html中定义事件处理程序及包含的动作。
代码如下:
49a91bc606ecfae89ddb770d21ee7984
第二种：html中定义事件处理程序，执行的动作则调用其他地方定义的脚本。
代码如下:
49a91bc606ecfae89ddb770d21ee79843f1c4e4b6b16bbbd69b2ee476dc4f83afunction showmessage(){ alert(clicked!);}2cacc6d41bbb37262a98f745aa00fbf0
note:
1）通过event变量可以直接访问事件本身，比如onclick=alert(event.type)会弹出click事件。
2）this值等于事件的目标元素，这里目标元素是input。比如onclick=alert(this.value)可以得到input元素的value值。
2、dom0级事件处理程序
这种方法简单而且跨浏览器，但是只能为一个元素添加一个事件处理函数。
因为这种方法为元素添加多个事件处理函数，则后面的会覆盖前面的。
添加事件处理程序：
<input type="button" value="click me!" onclick="showmessage()"/><script>function showmessage(){ alert("clicked!");}</script>
删除事件处理程序：
代码如下:
mybtn.onclick=null;
3、dom2级事件处理程序
dom2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addeventlistener()和removeeventlistener()。
这两个方法都需要3个参数：事件名，事件处理函数，布尔值。
这个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false。
添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。
<input id="mybtn" type="button" value="click me!"/><script> var mybtn=document.getelementbyid("mybtn"); mybtn.addeventlistener("click",function(){ alert("hello"); },false); mybtn.addeventlistener("click",function(){ alert("world"); },false);</script>
删除事件处理程序：通过addeventlistener添加的事件处理程序必须通过removeeventlistener删除，且参数一致。
note:通过addeventlistener添加的匿名函数将无法删除。下面这段代码将不起作用！
代码如下:
mybtn.removeeventlistener("click",function(){ alert("world"); },false);
看似该removeeventlistener与上面的addeventlistener参数一致，实则第二个参数中匿名函数是完全不同的。
所以为了能删除事件处理程序，代码可以这样写：
<input id="mybtn" type="button" value="click me!"/><script> var mybtn=document.getelementbyid("mybtn"); var handler=function(){ alert("hello"); } mybtn.addeventlistener("click",handler,false); mybtn.removeeventlistener("click",handler,false);</script>
二、ie事件处理程序
1、实际应用场景
ie8及以下浏览器不支持addeventlistener，在实际开发中如果要兼容到ie8及以下浏览器。如果用原生的绑定事件，需要做兼容处理，可利用jquery的bind代替。
2、ie8事件绑定
ie8及以下版本浏览器实现了与dom中类似的两个方法：attachevent()和detachevent()。
这两个方法都需要两个参数：事件处理程序名称和事件处理程序函数。
note:
ie11只支持addeventlistener！
ie9，ie10对attachevent和addeventlistener都支持！
te8及以下版本只支持attachevent！
可以拿下面代码在ie各个版本浏览器中进行测试。
<input id="mybtn" type="button" value="click me!"/><script> var mybtn=document.getelementbyid("mybtn"); var handlerie=function(){ alert("helloie"); } var handlerdom= function () { alert("hellodom"); } mybtn.addeventlistener("click",handlerdom,false); mybtn.attachevent("onclick",handlerie);</script>
添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world
<script> var mybtn=document.getelementbyid("mybtn"); mybtn.attachevent("onclick",function(){ alert("hello"); }); mybtn.attachevent("onclick",function(){ alert("world"); });</script>
note:这里运行效果值得注意一下：
ie8以下浏览器中先弹出“world”，再弹出“hello”。和dom中事件触发顺序相反。
ie9及以上浏览器先弹出“hello”，再弹出“world”。和dom中事件触发顺序相同了。
可见ie浏览器慢慢也走上正轨了。。。
删除事件处理程序:通过attachevent添加的事件处理程序必须通过detachevent方法删除，且参数一致。
和dom事件一样，添加的匿名函数将无法删除。
所以为了能删除事件处理程序，代码可以这样写：
<input id="mybtn" type="button" value="click me!"/><script> var mybtn=document.getelementbyid("mybtn"); var handler= function () { alert("hello"); } mybtn.attachevent("onclick",handler); mybtn.detachevent("onclick",handler);</script>
note:ie事件处理程序中还有一个地方需要注意：作用域。
使用attachevent()方法，事件处理程序会在全局作用域中运行，因此this等于window。
而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。
下面例子会弹出true。
<input id="mybtn" type="button" value="click me!"/><script> var mybtn=document.getelementbyid("mybtn"); mybtn.attachevent("onclick",function(){ alert(this===window); });</script>
在编写跨浏览器的代码时，需牢记这点。
ie7\8检测：
//判断ie7\8 兼容性检测 var isie=!!window.activexobject; var isie6=isie&&!window.xmlhttprequest; var isie8=isie&&!!document.documentmode; var isie7=isie&&!isie6&&!isie8; if(isie8 || isie7){ li.attachevent("onclick",function(){ _marker.openinfowindow(_iw); }) }else{ li.addeventlistener("click",function(){ _marker.openinfowindow(_iw); }) }
以上所述是小编给大家介绍的javascript事件学习小结(二)js事件处理程序的相关知识，希望对大家有所帮助！
相关推荐：javascript事件学习小结（四）event的公共成员（属性和方法）
javascript事件学习小结（一）事件流
javascript事件学习小结(五）js中事件类型之鼠标事件
javascript事件学习小结（三）js事件对象
以上就是javascript学习中常会遇到的js事件处理程序的详细内容。