对于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
相关推荐
NULL 博文链接:https://zhang-yingjie-qq-com.iteye.com/blog/321486
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意
主要介绍了addEventListener 的用法,需要的朋友可以参考下
主要介绍了Js on及addEventListener原理用法区别解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
本文为大家介绍下动态的绑定事件的方法addEventListener的使用示例,不了解的朋友可以参考下
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
代码如下: function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序; 如果为true事件执行顺序为 addEventListener —- 标签的onclick事件 —- [removed] 如果为false事件的...
主要介绍了js中addEventListener()与removeEventListener()用法,结合实例形式分析了js中addEventListener()与removeEventListener()基本功能、用法与操作注意事项,需要的朋友可以参考下
可能你也碰到过这种情况,就是在js的代码中用了[removed]后...至于attachEvent和addEventListener的用法,可以自己Google或百度一下。 代码如下: if (document.all){ window.attachEvent(‘onload’,函数名)//IE中 } els
所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用...
事件监听器 如果您需要支持旧版IE,则addEventListener()与addEvent()简单函数。安装npm install event-listener用法var listen = require ( 'event-listener' )// Returns an object with a .remove() methodvar ...
Adding-Event-Handlers_lesson 学习如何使用事件处理程序和JavaScript的.addEventListener()方法的课程
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
我们使用的DOM2事件绑定,其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的。 DOM0级事件绑定:只能给一个元素的某一个行为绑定一次方法,第二次绑定的会把前面的覆盖掉。 DOM...
在低版本IE中可以使用: attachEvent(事件名,事件函数) 绑定事件 detachEvent 取消事件 注意:事件名 包含on前缀 两种事件绑定的区别: 1.addEventListener: 事件名没有on前缀 可以选择冒泡或者捕获机制 this ...