脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Event事件 标准DOM

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需再刷新一下页面才能执行]
您可能感兴趣的文章:

相关文章

  • 微信小程序实现打开并下载服务器上面的pdf文件到手机

    微信小程序实现打开并下载服务器上面的pdf文件到手机

    这篇文章主要介绍了微信小程序实现打开并下载服务器上面的pdf文件到手机，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 基于javascript实现图片滑动效果

    基于javascript实现图片滑动效果

    这篇文章主要为大家详细介绍了基于javascript实现图片滑动效果的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下
    2016-05-05
  • JS数组push、unshift、pop、shift方法的实现与使用方法示例

    JS数组push、unshift、pop、shift方法的实现与使用方法示例

    这篇文章主要介绍了JS数组push、unshift、pop、shift方法,结合实例形式分析了JS数组push、unshift、pop、shift方法针对数组添加、删除等相关操作技巧,需要的朋友可以参考下
    2020-04-04
  • 千万别错过的JavaScript sort方法使用指南

    千万别错过的JavaScript sort方法使用指南

    sort方法在我们的日常开发中是经常使用的，sort方法一般是用来对数组进行排序的，但是你是否知道sort方法默认是按什么方式排序的呢？下面就和我一起来深入了解sort方法吧
    2023-05-05
  • javascript跨域的4种方法和原理详解

    javascript跨域的4种方法和原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
    2014-04-04
  • 纯js三维数组实现三级联动效果

    纯js三维数组实现三级联动效果

    这篇文章主要为大家详细介绍了纯js三维数组实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 详解JavaScript 中的批处理和缓存

    详解JavaScript 中的批处理和缓存

    这篇文章主要介绍了详解JavaScript 中的批处理和缓存，帮助大家完成需求，更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-11-11
  • JS实用案例之输入智能提示(打字机输出效果)

    JS实用案例之输入智能提示(打字机输出效果)

    最近在项目需求中遇到之前没有做过的功能,下面这篇文章主要给大家介绍了关于JS实用案例之输入智能提示,文中通过实例代码介绍的非常详细,打字机输出效果的相关资料,需要的朋友可以参考下
    2023-01-01
  • JavaScript函数柯里化实现原理及过程

    JavaScript函数柯里化实现原理及过程

    这篇文章主要介绍了JavaScript函数柯里化实现原理及过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • 原生JS实现逼真的图片3D旋转效果详解

    原生JS实现逼真的图片3D旋转效果详解

    这篇文章主要介绍了原生JS实现逼真的图片3D旋转效果,结合实例形式详细分析了javascript实现图片3D旋转相关操作技巧与注意事项,需要的朋友可以参考下
    2019-02-02

最新评论