• DOM0级事件误区-addEventListener


    百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖

    概念如下:

      同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数


    其实不然,官方讲解:添加的事件不会覆盖已存在的事件

     

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
      <p>该实例使用 addEventListener() 方法在同一个按钮添加两个点击事件。</p>
      <button id="myBtn">点我</button>
    <script>
      var x = document.getElementById("myBtn");
      x.addEventListener("click", myFunction);
      x.addEventListener("click", myFunction);
      x.addEventListener("click", someOtherFunction);
      function myFunction(){
          alert ("Hello World!")
      }
      /**
       *
    如果外部有多个相同的函数名,调用相同的函数名,在外部会直接覆盖,
      * 但是addEventListener事件调用同一个函数名,添加的事件不会覆盖已存在的事件,无论后续多次执行也不会被覆盖
      */
      function myFunction(){
          alert ("Helle World!")
      }
      function someOtherFunction(){ 
        alert (
    "该函数也将被执行!")
      }
    </script>
    </body>
    </html>
  • 相关阅读:
    2018.4.26 lvm
    2018.4.25 github创建新项目
    2018.4.24 快排查找第K大
    2018.4.24 flask_mail使用
    SpringBoot中使用ES和MongoDB常用API
    设计模式-Template_Method模式
    设计模式-Chain of Responsibility模式
    设计模式-Observer模式
    设计模式-Adapter模式
    设计模式-Strategy模式
  • 原文地址:https://www.cnblogs.com/CCxi/p/10831089.html
Copyright © 2020-2023  润新知