javascript addEventListener和attachEvent 事件绑定
2012-06-12 15:39
537 查看
对于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="ivan" /> </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
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="ivan" /> </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绑定事件addEventListener与attachEvent
- javascript attachEvent绑定多个事件执行顺序问题
- javascript事件绑定,取消,addEventListener,removeEventListener,attachEvent,detachEvent
- JavaScript中,四种事件绑定方法及attachEvent与addEventListener的区别
- Javascript关于绑定事件方法attachEvent和addEventListener区别与兼容写法
- javascript attachEvent绑定多个事件执行顺序问题
- 监听事件绑定(addEventListener、attachEvent)和移除(removeEventListener、detachEvent)
- js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法
- 20,事件应用,事件绑定attachEvent,addEventListener,捕获事件setCapture()
- Javascript添加事件的addEventListener()及attachEvent()区别分析
- javascript attachEvent addEventListener 监听事件
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
- addEventListener和attachEvent以及事件句柄绑定的区别
- [ javascript ] attachEvent事件!
- js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法
- JavaScript为元素动态添加事件之(attachEvent||addEventListener)
- js绑定事件(attachEvent、addEventListener)传参
- JavaScript事件监听(attachEvent、 addEventListener)
- javascript注册事件-addEventListener和attachEvent