首页 > 代码库 > javascript中addEventListener(attachEvent)详解
javascript中addEventListener(attachEvent)详解
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 “click”);第二个参数表示要接收事件处理的函数;第三个参数为 useCapture。例子如下:
<button type="button">点击我</button>
<img src=http://www.mamicode.com/"11 (6).jpg" alt="" style="display:block">"wp_keywordlink" style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent">javascript
">
var obj=document.getElementsByTagName("button")[0];
function fun(){
alert(0);
}
function fun2(){
alert(1);
}
function fun3(){
alert(2);
}
//如果这样写,那么将会只有fun3被执行,JS没有重载(JAVA中可以根据参数的不同来做到重载,即使函数的名字一样,但是JS不行,JS可以利用argument.length和if判断来模拟重载)
obj.onclick=fun;
obj.onclick=fun2;
obj.onclick=fun3;
//3个函数都会执行,执行顺序为method1->method2->method3,但是IE8及以下不支持(用attachEvent)
if(window.addEventListener){
obj.addEventListener("click",fun,false);
//关于第三个参数的作用,请看:http://chinazblz.blog.163.com/blog/static/939391732010424325598/和addEventListener2.html
obj.addEventListener("click",fun2,false); //第三个参数默认值为false,所以如果不写其值默认为false
obj.addEventListener("click",fun3,false);
}
else if(window.attachEvent){
obj.attachEvent("onclick",fun); //注意attachEvent没有第3个参数
obj.attachEvent("onclick",fun2); //注意这个onclick,而不是click
obj.attachEvent("onclick",fun3);
//执行顺序刚好相反,为method3->method2->method1,要想和FF效果一样,可以把函数反过来写,即:
//obj.attachEvent("onclick",fun3);
//obj.attachEvent("onclick",fun2);
//obj.attachEvent("onclick",fun);
}
</script>关于第三个参数的应用区别如下:
<div id="div_test"><input id="btn_test" type="button" value=http://www.mamicode.com/"web前端开发-css119" /></div> <script type="text/javascript">// <![CDATA[ window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,true); //把第3个参数改为false看看效果 document.getElementById("btn_test").addEventListener("click",test2,true); //把第3个参数改为false看看效果 } function test1(){ alert("外层div触发") } function test2(){ alert("内层input触发") } // ]]></script>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。