JavaScript——DOM Level0和DOM Level2事件模型

事件处理是JavaScropt中近几年变化最大的部分，也是现有浏览器中仍然存在差异的主要方面之一。为了开发出能够跨浏览器兼容的事件处理程序，我们在编写程序时需要注意一些细节。

【DOM Level0】：又称传统事件处理——通过对象属性将一个函数值指定为事件处理程序的做法。也就是将要添加的事件处理程序直接赋给该对象的事件处理程序属性。任何对象只允许指定一个事件处理程序。DOM Level0时间分成两种阵营：NetScape(Firefox,Mozilla,Opera,Safari)和IE阵营，为了获得这两种类型浏览器都能兼容的网页时，需要注意以下对象以及对应的几个属性。

*Event对象——可以用来提供Event相关信息的属性

IE中将Event视作window对象属性，NetScape直接看做Event对象；用三元运算符来判断某个Event对象nsEvent是否已定义。

处理浏览器兼容方法：var theEvent=nsEvent ? nsEvent : window.event;

*Event的fromElement和relatedTarget属性（分别属于IE和Firefox）——通过鼠标事件获取鼠标从哪个对象移开（类似的还有aretoElement和currentTarget属性，用来获取鼠标移动到哪个对象）

处理浏览器兼容方法：var oldElement=theEvent.fromElement ? theEvent.fromElement : theEvent.relatedTarget;

*IE中的srcElement和Mozilla浏览器中的target属性——用来表示接收事件的对象

处理浏览器兼容方法：var theSrc=theEvent.target ? theEvent.target : theEvent.srcElement;

*IE中的cancelBubble和Mozilla之类的stopPropagation——则用于处理事件冒泡操作的关于浏览器兼容性的属性

处理浏览器兼容方法：fiunction stopEvent(theEvent)

{

if(theEvent.stopPropagation)

{

theEvent.stopPropagation();

}

else

{

theEvent.cancelBubble=true;

}

}

【DOM Level2】与老事件模型DOM Level0的主要区别在：1.新模型不依赖于特定的事件处理程序属性。2.可以对任何对象的任何一种事件注册多个事件处理程序函数。这里处理浏览器兼容性问题的主要来自：Mozilla之类的浏览器支持的三种对象方法：addEventListener,removeEventListener和dispatchEvent与IE浏览器支持的对象方法：attachEvent和detachEvent之间的区别。

*Mozilla类浏览器中添加一个事件监听器,其他类似

object.addEventListener("event",eventFunction,boolean);

参数一：click和load之类事件；参数二：指定的事件处理程序函数；参数三：指定事件捕获模型(true)和冒泡模型(false)。

*IE浏览器中添加一个事件监听器：

object.attachEvent("eventhandler",function);

参数一：事件处理程序；参数二：函数。

为了兼容上述的差异的处理方法：

function setup(theEvent)

{

var evtObject=document.getElementById("clickme");

if(evtObject.addEventListener){                                         //测试对象模型

evtObject.addEventListener("click",clickme,false);} 

else if(evtObject.attachEvent){

evtObject.attachEvent("onclick",clickme);}

else if(evtObject.onclick){

evtObject.οnclick=clickme;}

}