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.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="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>
