zoukankan      html  css  js  c++  java
  • 原生 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>
    
    
    
  • 相关阅读:
    SpringBoot(十二)------国际化配置
    SpringBoot(十一) ----SpringBoot结合mybatis实现增删改查
    SpringBoot(十)----SpringMVC自动配置&扩展配置
    SpringBoot学习(九) ------访问静态web资源
    leetcode-----两数相加
    JDBC — 学习大纲
    网络编程
    StringBuffer
    代理
    加载文件的两种方式
  • 原文地址:https://www.cnblogs.com/humi/p/7268198.html
Copyright © 2011-2022 走看看