原生 JS 绑定事件移除事件

最新推荐文章于 2023-04-11 17:30:43 发布

dashan_1200

最新推荐文章于 2023-04-11 17:30:43 发布

阅读量433

点赞数

原文链接：http://www.cnblogs.com/humi/p/7268198.html

版权

监听事件的绑定与移除主要是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>

转载于:https://www.cnblogs.com/humi/p/7268198.html

dashan_1200

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生 JS 绑定事件移除事件

监听事件的绑定与移除主要是addEventListener和removeEventListener的运用。addEventListener语法element.addEventListener(type，handler，false/true)type:事件类型handler:事件执行触发的函数false/true:false为冒泡/ture为捕获，参数是true，表示在捕...
复制链接

扫一扫