javascript中addEventListener(attachEvent)具体解释

最新推荐文章于 2024-09-08 12:57:21 发布

aodiyi6351

最新推荐文章于 2024-09-08 12:57:21 发布

阅读量177

点赞数

文章标签： javascript 前端 java ViewUI

原文链接：http://www.cnblogs.com/mfmdaoyou/p/7383929.html

版权

本文深入解析JavaScript中的事件监听机制，包括addEventListener与attachEvent的区别，如何使用不同参数实现事件捕获与冒泡，以及在不同浏览器版本中的兼容性问题。通过实例代码展示了多个函数监听同一事件的运行顺序和作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

addEventListener 有三个參数：第一个參数表示事件名称（不含 on，如 “click”）。第二个參数表示要接收事件处理的函数；第三个參数为 useCapture。样例例如以下：

 <button type="button">点击我</button>
<img src="11 (6).jpg" alt="" style="display:block">
<script type="text/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.οnclick=fun;
obj.οnclick=fun2;
obj.οnclick=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="web前端开发-css119" /></div>
<script type="text/javascript">// <![CDATA[
window.οnlοad=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>

转载于:https://www.cnblogs.com/mfmdaoyou/p/7383929.html