本文介绍2级DOM的事件句柄。这种方式是比较新的方式，它不依赖于任何特定的事件句柄属性。W3C规定的方式是
object.addEventListener(‘event’,function,boolean)
第一个参数是事件名，第二个是事件响应函数，第三个变量如果是true，则事件函数在事件冒泡阶段被触发，否则是在事件的捕获阶段被触发。W3C规定事件的发生有两个阶段，首先是捕获，即事件以此从最外层层的元素向内层传递，相应的事件处理函数被依次触发，然后是冒泡阶段，事件从最内层的元素向外层传递。 看一个例子：
<html> <head> <title>DOM 2 Event</title> <script type="text/javascript"> function setup(){ var div=document.getElementById('testDiv'); div.addEventListener('click',function(){alert('div true');},true); document.addEventListener('click',function(){alert('body true');},true); div.addEventListener('click',function(){alert('div false');},false); document.addEventListener('click',function(){alert('body false');},false); } window.onload=setup; </script> </head> <body > <div id='testDiv' style="width:100px;height:100px;background-color:gray"></div> <body> </html>
点击灰色框，会依次弹出body true,div true,div false,body false. 很遗憾，IE不支持这种方式,最新的IE8也不支持。不过IE也有类似的注册事件的方法，名字是attachEvent.不过这个方法没有第三个参数，它支持冒泡阶段的事件响应。attachEvent函数传递事件参数的时候是和W3C一致的，也是通过event参数传递，但是，其函数内部的this指向的不是触发事件对象，而永远指向window。在event对象中有一个属性指向触发该事件的对象，W3C中是target,IE中是srcElement, 在符合W3C规范的浏览器中，事件处理函数中的this和event.target指向的是同一个对象。下面的程序展示了一个IE和W3C兼容的事件处理程序：
<html> <head> <title>DOM 2 Event</title> <script type="text/javascript"> function ClickMe(event){ var target1=event.target?event.target:event.srcElement; alert(target1.innerHTML); } function setup(){ var div=document.getElementById('testDiv'); if(div.addEventListener){ div.addEventListener('click',ClickMe,false); }else{ div.attachEvent('onclick',ClickMe); } } window.onload=setup; </script> </head> <body> <div id='testDiv' style="100px;height:100px;background-color:gray"> Hello World. </div> </body> </html>
事件处理程序中W3C和IE还有诸多不一致之处，十分麻烦。好在大多都有较好的解决方案。更多信息请参考http://www.quirksmode.org/js/events_events.html