Javascript Event事件中IE与标准DOM的比较
更新时间：2010年04月23日 17:36:57 作者：
说是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();
}
}
附一个代码测试窗口：(感觉有些时候这种方式比alert()还好用)
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
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需再刷新一下页面才能执行]
相关文章
firefox firebug中文入门教程 脚本之家新年特别版
最近看了一篇文章感触颇深，对于firebug作为脚本之家的编辑经常看的到，但可悲的是没怎么用过，不是不用那个而是不会用，刚好看了一篇基础的文章特别整理下。2010-01-01
这篇文章主要为大家详细介绍了js实现城市级联菜单的2种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
My Desktop 桌面式 代码2008-12-12
JS数组追加数组没有现成的函数，这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的，不需要写for循环的写法，一直也没遇到什么问题，直到今天我要append的b是个很大的数组时才遇到了坑。2014-06-06
ECMAScript 是一种标准化的脚本语言，它是 JavaScript 的规范。ECMAScript 2023 是 JavaScript 编程语言的更新，旨在带来改进并使 JavaScript 程序可预测和可维护，这篇文章主要介绍了探索 ECMAScript 2023 中的新数组方法,需要的朋友可以参考下2023-12-12
JavaScript requestAnimationFrame动画详解
这篇文章主要为大家详细介绍了JavaScript requestAnimationFrame动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要给大家介绍了关于js重写alert事件的相关资料，这样可以避免alert弹框标题出现网址的情况，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了滑动翻页效果实现和移动端click事件问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
正则又叫规则或模式，是一个强大的字符串匹配工具。javascript通过RegExp类型来支持正则表达式，本文给大家介绍javascript类型系统之正则表达式，对js正则表达式相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了JS实现一个按钮的方法,实例分析了使用js实现一个按钮的功能与相关技巧,需要的朋友可以参考下2015-02-02
最新评论