码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-07-20 14:35:00      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:浏览器   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!