93
技術社區[雲棲]
javascript中addEventListener(attachEvent)詳解
addEventListener 有三個參數：第一個參數表示事件名稱（不含 on，如 “click”）；第二個參數表示要接收事件處理的函數；第三個參數為 useCapture。例子如下：
<button type="button">點擊我</button> <img src="11 (6).jpg" alt="" > <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); //關於第三個參數的作用，請看：https://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 ><input 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>
最後更新：2017-04-03 05:39:57