`

用attachEvent()/addEventListener()方法添加触发事件

阅读更多

用attachEvent()/addEventListener()方法添加触发事件

在近来的工作中,用到了attachEvent方法,该方法可以为某一事件附加其它的处理事件,有时候可能比较有用,这里将其基本用法总结一下。

其语法可以查看《DHTML手册》,里面有详细的说明,这里贴一个例子,该例子来自互联网:

 

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


以上为转载,以下为我研究的具体实例

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


//用两种方法判断,以兼容各种浏览器。

以上为转载


 

分享到:
评论

相关推荐

    attachEvent和addEventListener 使用方法

    在JavaScript中,`attachEvent` 和 `addEventListener` 是两种用于为元素添加事件处理程序的方法,主要在Internet Explorer和非IE浏览器(遵循W3C标准)中使用。它们都是用来监听和响应用户或浏览器的特定行为,如...

    javascript触发模拟鼠标点击事件

    在上述代码中,`addEventListener`方法用于绑定事件处理函数,`createEvent`方法用于创建事件对象,最后通过`dispatchEvent`方法触发事件。`initEvent`方法用于初始化事件对象,它接受三个参数:事件类型、一个布尔...

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

    本文将探讨在 Internet Explorer (IE) 和 Firefox (FF) 浏览器中处理事件的方法,特别关注 `attachEvent` 和 `addEventListener` 的使用。 #### 二、事件处理概述 在 JavaScript 中,事件是指由用户或浏览器引发的...

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

    在JavaScript中,`addEventListener`和`attachEvent`都是用于向元素添加事件监听器的方法,但它们之间存在一些关键差异,特别是在处理`this`关键字时。`addEventListener`是W3C标准的一部分,被大多数现代浏览器支持...

    javascript动态添加事件.pdf

    综上所述,JavaScript动态添加事件涉及到多种技术,包括`setAttribute`、`attachEvent`、`addEventListener`,以及针对不同浏览器的兼容性策略。在实际开发中,应根据项目需求和浏览器支持情况选择合适的方法。

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

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

    详解JavaScript中的大事流和大事处理程序_.docx

    对于IE浏览器,其事件处理程序使用`attachEvent`和`detachEvent`方法,它们只支持冒泡阶段的事件处理。需要注意的是,由于匿名函数无法被引用,所以在IE中使用`detachEvent`移除事件处理程序时可能会遇到问题。 ...

    我自己写的可以触发事件,载入其他页面的JS

    在JavaScript中,我们可以自定义事件处理程序来实现这样的功能,这通常涉及到`addEventListener`或`attachEvent`(对于旧版IE浏览器)这两个方法。 首先,`addEventListener`是W3C标准的方法,用于向元素添加事件...

    JavaScript通过attachEvent和detachEvent方法处理带参数的函数

    在JavaScript中,当使用attachEvent添加事件处理函数时,通常需要在事件处理函数中额外指定this的上下文,以确保事件对象能够正确地传递给函数。这是因为attachEvent在绑定事件时会把事件处理函数中的this上下文指向...

    添加事件

    `addEventListener` 是现代浏览器广泛支持的方法,用于将一个或多个事件处理器添加到元素上。它接受两个参数:一个是事件类型(如 "click"),另一个是处理函数。例如,给按钮添加点击事件的代码如下: ```...

    js动态添加事件.txt

    在JavaScript中,动态添加事件监听器有两种主要方式:`addEventListener`和`attachEvent`。 - **`addEventListener`**:该方法用于现代浏览器,包括Mozilla、Netscape、Firefox等。它可以为一个DOM元素添加多个事件...

    event对象总结,更详细更全面

    事件对象可以通过多种方式attach到HTML元素上,例如使用addEventListener方法或attachEvent方法。addEventListener方法是W3C标准,它可以在Mozilla系列浏览器中使用,而attachEvent方法则是IE浏览器专用的方法。 ...

    事件高级用法及兼容写法

    在 IE 6/7/8 中,使用 `attachEvent` 和 `detachEvent` 方法来绑定和取消事件。 ```javascript element.attachEvent("on" + 事件名, 事件函数); element.detachEvent("on" + 事件名, 事件函数); ``` 这里...

    (word完整版)javascript看qq中多事件绑定的执行顺序.doc

    在W3C的标准下,推荐使用`addEventListener`方法来绑定事件,它的特点是事件处理函数按照添加的顺序依次执行。然而,Internet Explorer浏览器(IE6-IE8)遵循自己的规则,使用`attachEvent`方法进行事件绑定。`...

    js监听输入框值的即时变化onpropertychange、oninput.docx

    了解了如何使用oninput 事件和addEventListener 方法来监听输入框值的即时变化后,我们可以使用以下代码来实现: ```html <input type="text" id="textfield" /> ``` ```javascript var textfield = document....

    JS实现动态给标签控件添加事件的方法示例

    // 使用addEventListener方法添加事件,第三个参数为布尔值,表示是否在捕获阶段调用事件处理函数 obj.addEventListener('focus', add, false); } else { // IE 浏览器 // 使用attachEvent方法添加事件,'on'...

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

    它们使用标准的`addEventListener`方法来添加事件监听器: ```javascript self.addEventListener("blur", function() { dd.style.display = "none"; }); ``` 当在Chrome或其他非IE浏览器中运行使用`attachEvent`...

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

    在IE浏览器中,`attachEvent`用于添加事件监听器,而`addEventListener`是W3C标准的事件处理方式,被Firefox等现代浏览器所支持。两者的主要差异在于`this`的指向: - 在IE的`attachEvent`中,`this`指向全局对象`...

    Javascript处理DOM元素事件实现代码

    但是浏览器有addEventListener和attachEvent方法可供调用,从而模拟出类似于C#中的事件委托的事件触发机制! 代码如下: /* * 功能:事件处理 * Author:LQB * 时间:2009-1-4 * #include JCore.js */ var JEvents = ...

    JS实现鼠标右键菜单

    在JavaScript中,我们可以使用addEventListener方法来监听用户的鼠标事件。对于右键菜单,我们关注的是"contextmenu"事件,它会在用户按下鼠标右键时触发。例如: ```javascript document.addEventListener('...

Global site tag (gtag.js) - Google Analytics