1.DOM2和DOM0级共同优点：可以给一个元素上添加多个事件处理程序，会按照顺序执行。<br> DOM2级事件处理程序，ie不支持，ie有专用的事件处理程序。<br> DOM2级事件处理程序：定义了两个方法---用于处理指定和删除事件处理程序的操作。【addEventListener()---给某元素添加一个事件监听程序】和【removeEventListener()---删除一个事件。必须传入添加事件时相同的参数】（通过前者添加的事件，只能通过后者删除。如obj.click= null无效）<br> 3个参数：要处理的事件名、作为处理时间处理程序的函数及一个boolean（true---表示在捕获阶段调用事件处理程序，false---表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器)。一般设为false）.<br> 如：object.addEventListener("click",function(){},false); btn3.addEventListener('click',showMes,false); 注意： 1、若事件名称有on，则需去掉on。onclick --> click，onmouseover -->mouseover等等； 2、false 最大限度兼容所有浏览器--事件冒泡流。 3.通过addEventListener添加的事件只能通过removeEventListener来删除。--参数要与添加事件时相同 btn3.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致，删除事件监听 DOM0级和DOM2级事件处理程序可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。如下所示： btn3.addEventListener('click',showMes,false); btn3.addEventListener('click',showMes,function(){alert(this.value）;},false); 缺点：IE不支持该事件
2.IE事件处理程序：IE也提供了类似DOM2级事件处理程序 attachEvent()添加事件 detachEvent()删除事件 接收相同的两个参数，事件处理程序的名称和事件处理程序的函数。去掉了布尔值，不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡！ 在ie下给btn3添加事件 btn3.attachEvent('onclick',showMes); 主意：在ie事件处理程序上，又要把on加上 btn3.detachEvent('onclick',showMes); 支持ie事件处理程序的浏览器主要有ie和opera两个浏览器。 3.跨浏览器事件处理程序
解决浏览器兼容问题的最好方法是能力检测，有这个能力就使用这种方法，没有就使用别的方法。浏览器支持addEventListener，就使用这个方法；浏览器支持attachEvent，就使用这个方法。跨浏览器事件处理最好封装在一个对象内。
//跨浏览器事件处理程序 var eventUtil = { //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){element.addEventListener(type,handler,false);}// DOM2级事件处理程序 elseif(element.attachEvent){element.attachEvent('on'+type,handler);} // IE事件处理程序 else{element['on'+type]=handler;} // DOM0级事件处理程序 }, //删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){element.removeEventListener(type,handler,false);}// DOM2级事件处理程序 else if(element.detachEvent){element.detachEvent('on'+type,handler);}// IE事件处理程序 else{element['on'+type]=null;} //DOM0级事件处理程序 } } eventUtil.addHandler(btn3,'click',showMessage); 3.js中所有用'.'的地方都可以使用'[]' 如：对象的点击事件element.οnclick===element['onclick']
