• 原生 JS 绑定事件 移除事件


    监听事件的绑定与移除主要是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>
    
    
    
  • 相关阅读:
    c#之字段,属性,索引器,常量
    c#类,对象,类成员简介
    c#之接口,依赖反转,单元测试
    c#之 抽象类与开闭原则
    c#重写与多态
    c#之类
    c#之类的继承,类成员的访问控制
    c#之委托
    c# try catch用法思路
    js的全局变量
  • 原文地址:https://www.cnblogs.com/humi/p/7268198.html
Copyright © 2020-2023  润新知