对于IE的attachEvent方法可能大家都比较熟,现在说说FireFox的addEventListener的用法。
addEventListener的参数一共有三个,语法为:
element.addEventListener(type,listener,useCapture)
下面是详解
- 其中element是要绑定函数的对象。
- type是事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
- listener当然就是绑定的函数了,记住不要跟括号
- 最后一个参数是个布尔值,表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。
html代码
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div>
js代码
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外层div触发") } function test2(){ alert("内层input触发") }
自己体验一下,如果userCapture是true则test1先触发,如果userCapture是false则test2先触发。
在近来的工作中,用到了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
相关推荐
在JavaScript中,`...以上就是关于 `attachEvent` 和 `addEventListener` 的使用方法及其区别的详细介绍,它们在JavaScript事件处理中起着至关重要的作用。正确理解和使用这些方法可以提高代码的健壮性和兼容性。
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意
代码如下: function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序; 如果为true事件执行顺序为 addEventListener —- 标签的onclick事件 —- [removed] 如果为false事件的...
`addEventListener` 是JavaScript中用于添加事件监听器的方法,它允许我们为同一个元素绑定多个事件处理函数,这对于构建复杂的交互式网页非常有用。在不同的浏览器环境中,`addEventListener` 的使用略有差异,尤其...
JavaScript中的事件处理方式有两种主要的形式:`on`属性和`addEventListener`方法。这两种方式在处理事件时有着不同的特性和用法,理解它们的区别和应用场景对于编写高效、可维护的JavaScript代码至关重要。 首先,...
本文为大家介绍下动态的绑定事件的方法addEventListener的使用示例,不了解的朋友可以参考下
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
主要介绍了js中addEventListener()与removeEventListener()用法,结合实例形式分析了js中addEventListener()与removeEventListener()基本功能、用法与操作注意事项,需要的朋友可以参考下
可能你也碰到过这种情况,就是在js的代码中用了[removed]后...至于attachEvent和addEventListener的用法,可以自己Google或百度一下。 代码如下: if (document.all){ window.attachEvent(‘onload’,函数名)//IE中 } els
在JavaScript中,`addEventListener`和`attachEvent`都是用于向元素添加事件监听器的方法,但它们之间存在一些关键差异,特别是在处理`this`关键字时。`addEventListener`是W3C标准的一部分,被大多数现代浏览器支持...
在JavaScript中,处理DOM事件监听有两个主要的方法:`addEventListener` 和 `attachEvent`。这两个方法在功能上相似,但存在一些关键的区别,特别是在浏览器兼容性和事件处理方式上。 `addEventListener` 是W3C标准...
所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用...
在传统的事件处理中,我们通常使用addEventListener方法来注册事件监听器,然后在特定事件触发时执行相应的回调函数。这种方式在小规模项目中或许可行,但在大型复杂应用中,随着组件数量的增长,事件的管理和维护变...
`addEventListener()` 是JavaScript中用于添加事件监听器的方法,它允许我们对DOM元素绑定事件处理程序。这个方法接受三个参数:事件名称、事件处理函数以及一个可选的布尔值`useCapture`,用来指定事件处理程序是在...
事件监听器 如果您需要支持旧版IE,则addEventListener()与addEvent()简单函数。安装npm install event-listener用法var listen = require ( 'event-listener' )// Returns an object with a .remove() methodvar ...