本文详细解析了不同浏览器中的事件流模型，包括IE的冒泡型事件流与Firefox遵循的DOM标准（先捕获后冒泡）。同时介绍了在两种浏览器中事件的注册与取消、事件对象的获取方式、事件目标来源的确定方法以及如何阻止事件的默认行为和冒泡。
先看下面一段代码
<html>
<head>
<title>Example</title>
</head>
<body onclick="handleClick()">
<div id="div" onclick="handleClick()"></div>
</body>
</html>
对于上段代码:ie的事件流如图(1)所示：
(1)
firefox事件流如图(2)所示：
(2)
从两幅图可以看出:
1.IE是冒泡型事件流;firefox是捕获型在前冒泡型在后(DOM标准)。
2.IE不支持文本节点事件。
3.IE不支持window事件。
注:经测试firefox最底层元素(本例是div)的事件执行顺序是先注册先执行，无事件类型区别。
下面是一些主要事件操作和兼容问题：
一.事件的 注册与取消注册
var oDiv=document.getElementById("div");
var fnHandler=function(){};
IE:
oDiv.onclick=function(){};
oDiv.attachEvent("onclick",fnHandler); //此方法可为事件注册多个方法
oDiv.detachEvent("onclick",fnHandler); //删除注册了的事件
Firefox(DOM标准):
oDiv.onclick=function(){};//冒泡阶段
oDiv.addEventListener("click",fnHandler,true); //此方法可为事件注册多个方法
oDiv.removeEventListener("click",fnHandler,true); //删除注册了的事件
注:第三个参数true表示是捕获阶段,false表示是冒泡阶段
二.事件对象获取
IE:
oDiv.onclick=function(){
var oEvent=window.event //IE中事件对象是window对象的一个属性
}
Firefox:
oDiv.onclick=function(){
var oEvent=arguments[0] //Firefox中事件对象是方法体第一个参数
}
oDiv.onclick=function(e){
var oEvent=e;
}
三.获取事件目标来源
IE:
oDiv.onclick=function(){
var oEvent=window.event;
var oTarget=oEvent.srcElement;
}
Firefox:
oDiv.onclick=function(e){
var oEvent=e;
o.Target=e.target;
}
注:这个来源是事件流的最低端对象，这里是div.
四.阻止事件默认行为
IE:
oDiv.onclick=function(){
var oEvent=window.event;
oEvent.returnValue=false;
}
Firefox:
oDiv.onclick=function(e){
var oEvent=e;
oEvent.preventDefault();
}
五.阻止事件冒泡
IE:
oDiv.onclick=function(){
var oEvent=window.event;
oEvent.cancelBubble=true;
}
Firefox:
oDiv.onclick=function(e){
var oEvent=e;
oEvent.stopPropagation();
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
