Javascript 浏览器事件（下）

本文介绍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