先看下面一段代码
<html>
<head>
<title>Example</title>
</head>
<body οnclick="handleClick()">
<div id="div" οnclick="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.οnclick=function(){};
oDiv.attachEvent("onclick",fnHandler); //此方法可为事件注册多个方法
oDiv.detachEvent("onclick",fnHandler); //删除注册了的事件
Firefox(DOM标准):
oDiv.οnclick=function(){};//冒泡阶段
oDiv.addEventListener("click",fnHandler,true); //此方法可为事件注册多个方法
oDiv.removeEventListener("click",fnHandler,true); //删除注册了的事件
注:第三个参数true表示是捕获阶段,false表示是冒泡阶段
二.事件对象获取
IE:
oDiv.οnclick=function(){
var oEvent=window.event //IE中事件对象是window对象的一个属性
}
Firefox:
oDiv.οnclick=function(){
var oEvent=arguments[0] //Firefox中事件对象是方法体第一个参数
}
oDiv.οnclick=function(e){
var oEvent=e;
}
三.获取事件目标来源
IE:
oDiv.οnclick=function(){
var oEvent=window.event;
var oTarget=oEvent.srcElement;
}
Firefox:
oDiv.οnclick=function(e){
var oEvent=e;
o.Target=e.target;
}
注:这个来源是事件流的最低端对象，这里是div.
四.阻止事件默认行为
IE:
oDiv.οnclick=function(){
var oEvent=window.event;
oEvent.returnValue=false;
}
Firefox:
oDiv.οnclick=function(e){
var oEvent=e;
oEvent.preventDefault();
}
五.阻止事件冒泡
IE:
oDiv.οnclick=function(){
var oEvent=window.event;
oEvent.cancelBubble=true;
}
Firefox:
oDiv.οnclick=function(e){
var oEvent=e;
oEvent.stopPropagation();
}
1078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
