事件处理是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;}
}
版权声明：本文为博主原创文章，未经博主允许不得转载。