監聽事件的綁定與移除主要是addEventListener和removeEventListener的運用。
addEventListener語法
element.addEventListener(type，handler，false/true)
type:事件類型
handler:事件執行觸發的函數
false/true:false為冒泡/ture為捕獲，參數是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
事件捕獲：父級元素先觸發，子集元素后觸發；
事件冒泡：子集元素先觸發，父級元素后觸發；
一般的綁定事件，都是采用冒泡方式，也就是使用false
removeEventListener語法
element.removeEventListener(type，handler，false/true)
參數值含義和上述一樣。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <input type="button" value="test1" id="btn1">
9 <input type="button" value="test2" id="btn2">
10 <script>
11 var btn1=document.getElementById("btn1");/*實名函數*/
12 var count=0;
13 var handle1=function() {
14 alert(count++);
15 if (count == 3) {
16 alert("事件結束")
17 btn1.removeEventListener("click",handle1,false);
18 }
19 }
20 btn1.addEventListener('click',handle1,false);
21
22
23 var btn2=document.getElementById("btn2");/*匿名函數*/
24 btn2.addEventListener("click",function(){
25 alert(123);
26 removeEventListener("click",function(){
27 alert(123)
28 },false)
29 },false)
30 </script>
31 </body>
32 </html>
原生 JS 綁定事件 移除事件
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。