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

标签：浏览器   javascript   dom   对象   

事件处理是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.onclick=clickme;}

}

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

标签：浏览器   javascript   dom   对象   

原文地址：http://blog.csdn.net/jsdchenye/article/details/46966159