Javascript Event事件中IE与标准DOM的比较_ie event 与 dom event-优快云博客

说是IE与DOM的比较，其实还是浏览器之间的比较，众多的浏览器中，IE独树一帜，并且占有大部分用户市场，后来的标准DOM虽然不少优点之处，但毕竟一般用户不关心也不知道这些，代码编写过程中，往往需要兼顾多个浏览器。

1.事件流的区别

IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件
示例：

代码如下:

<body> 

<div> 

<button>点击这里</button> 

</div> 

</body>

冒泡型事件模型： button->div->body (IE事件流)

捕获型事件模型： body->div->button (Netscape事件流)

DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)

2.事件侦听函数的区别

IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定

DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定

bCapture参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。

示例代码：

代码如下:

function addEventHandler(object,eventType,fnHandler){ 

if(object.addEventListener){ //DOM 

object.addEventListener(eventType, fnHandler, false); 

}else if(object.attachEvent){ //IE 

object.attachEvent("on"+eventType, fnHandler); 

}else{ //others 

object["on"+eventType]=fnHandler; 

} 

} 

function removeEventHandler(object,eventType,fnHandler){ 

if(object.removeEventListener){ //DOM 

object.removeEventListener(eventType, fnHandler, false); 

}else if(object.detachEvent){ //IE 

object.detachEvent("on"+eventType, fnHandler); 

}else{ //others 

object["on"+eventType]=null; 

} 

} 

addEventHandler(oDiv,"click",function(){alert("clicked")});

3.事件对象定位(获取)

IE：事件对象是window对象的一个属性event，event只能在事件发生时访问，事件处理函数执行完毕，事件对象被销毁。

示例：

复制代码代码如下:

document.onclick=function(){ 

alert(window.event.type); 

} 

DOM：event对象必须作为唯一的参数传递给事件处理函数，且必须为第一个参数。

示例：

复制代码代码如下:

document.onclick=function(){ 

alert(arguments[0].type); 

} 

4.获取目标(target)
IE：var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;

5.阻止事件默认行为

IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();

示例：

代码如下:

//屏蔽网页右键菜单 

document.body.oncontextmenu=function(oEvent){ 

if(document.all){ 

oEvent=window.event; 

oEvent.returnValue=false; 

}else{ 

oEvent.preventDefault(); 

} 

}

6.停止事件复制（冒泡）
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();

示例：

代码如下:

button.onclick=function(oEvent){ 

if(document.all){ 

oEvent=window.event; 

oEvent.cancelBubble=true; 

}else{ 

oEvent.stopPropagation(); 

} 

}