`

attachEvent与addEventListener区别

阅读更多

适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法          按钮onclick
addEventListener方法    按钮click


两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列

举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行

写成这样:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1

如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3

使用实例:

1。 var el = EDITFORM_DOCUMENT.body;
//先取得对象,EDITFORM_DOCUMENT实为一个iframe
if (el.addEventListener){
       el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
       el.attachEvent('onclick', KindDisableMenu);
}

2。 if (window.addEventListener) {
           window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
           window.attachEvent('onload', _uCO);
}

分享到:
评论

相关推荐

    attachEvent和addEventListener 使用方法

    在JavaScript中,`...以上就是关于 `attachEvent` 和 `addEventListener` 的使用方法及其区别的详细介绍,它们在JavaScript事件处理中起着至关重要的作用。正确理解和使用这些方法可以提高代码的健壮性和兼容性。

    javascript attachEvent和addEventListener使用方法

    本知识点将介绍 JavaScript 中两种常用的方法:attachEvent 和 addEventListener,以及它们在不同浏览器中的应用和区别。 首先,attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法,它的语法是:...

    JS在IE和FF下attachEvent,addEventListener学习笔记

    ### JavaScript中的事件处理:attachEvent与addEventListener #### 一、引言 JavaScript 是一种广泛使用的脚本语言,它被用于实现网页的动态效果和交互功能。随着 Web 技术的发展,浏览器之间的差异也逐渐显现出来...

    addEventListener和attachEvent二者绑定的执行函数中的this不相同

    2. **`attachEvent`**: 与`addEventListener`不同,`attachEvent`在IE中执行事件处理函数时,`this`会指向绑定事件的元素,通常是全局对象`window`。当点击`test1`时,所有浏览器的行为一致,因为`onclick`属性直接...

    浅谈addEventListener和attachEvent的区别

    在JavaScript中,处理DOM事件监听有两个主要的方法:`addEventListener` 和 `attachEvent`。这两个方法在功能上相似,但存在一些关键的区别,特别是在浏览器兼容性和事件处理方式上。 `addEventListener` 是W3C标准...

    IE11没有window.attachEvent方法处理方法

    首先,我们需要理解`attachEvent`与`addEventListener`的区别。`attachEvent`是IE4至IE8特有的事件绑定方式,而`addEventListener`则是一种更通用、更符合W3C标准的方法,被现代浏览器广泛支持。当我们在IE11中尝试...

    Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点、document、window 或 XMLHttpRequest。 type: 字符串,事件名称,不含“on”,比如“click”...

    window.addEventListener来解决让一个js事件执行多个函数

    这时就要用window.attachEvent和window.addEventListener来解决一下。 下面是一个解决方法。至于attachEvent和addEventListener的用法,可以自己Google或百度一下。 代码如下: if (document.all){ window....

    js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEventListener方法 兼容火狐谷歌,不兼容IE8及以下 ...

    addEventListener 的用法示例介绍

    在不同的浏览器环境中,`addEventListener` 的使用略有差异,尤其是在IE与非IE浏览器之间。 在标准的W3C DOM2级事件模型中,`addEventListener` 的语法如下: ```javascript target.addEventListener(type, ...

    self.attachevent is not a function的解决方法

    总之,解决`self.attachevent is not a function`错误的关键在于理解`attachEvent`和`addEventListener`的区别,并通过条件判断或者使用库来实现跨浏览器的兼容性。同时,对于事件处理的模式选择,应根据实际需求和...

    Js on及addEventListener原理用法区别解析

    需要注意的是,`addEventListener`在Internet Explorer 9以下版本不被支持,此时需要使用`attachEvent()`,其语法与`addEventListener`有所不同,事件类型需要加上`on`前缀,且不接受`useCapture`参数。 此外,...

    讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别

    接下来,我们讨论IE的`attachEvent`与Firefox的`addEventListener`的区别。在IE浏览器中,`attachEvent`用于添加事件监听器,而`addEventListener`是W3C标准的事件处理方式,被Firefox等现代浏览器所支持。两者的...

    attachEvent的使用方法与传递参数[IE|firefox]|angluo-javascript-37392.pdf

    与W3C标准的`addEventListener`不同,`attachEvent`并不支持事件捕获阶段,并且它的事件处理函数会在事件冒泡的过程中执行。 在`attachEvent`中,事件处理函数的执行上下文(即`this`的值)会指向调用`attachEvent`...

Global site tag (gtag.js) - Google Analytics