首页 / JAVASCRIPT / Javascript Event事件中IE与标准DOM的比较

Javascript Event事件中IE与标准DOM的比较

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript Event事件中IE与标准DOM的比较，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3331字，纯文字阅读大概需要5分钟。

内容图文

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(); 
} 
} 
 
附一个代码测试窗口：(感觉有些时候这种方式比alert()还好用) 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的Javascript Event事件中IE与标准DOM的比较全部内容，希望文章能够帮你解决Javascript Event事件中IE与标准DOM的比较所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/371382.html

来源：【匿名】