zoukankan      html  css  js  c++  java
  • addEventListener和on的区别

    onclick代码:
    <div id="box">点我</div>

    window.onload = function(){
      var box = document.getElementById("box");
      box.onclick = function(){
        console.log("我是box1");
      }
      box.onclick = function(){
        box.style.fontSize = "18px";
        console.log("我是box2");
      }
    }
    // 运行结果:“我是box2”

    运行结果:第二个onclick把第一个onclick给覆盖了,但是当我们需要执行多个相同的事件怎么办?


    addEventListener就出现了

    addEventListener代码:

    window.onload = function(){
      var box = document.getElementById("box");
      box.addEventListener("click",function(){
        console.log("我是box1");
      })
      box.addEventListener("click",function(){
        console.log("我是box2");
      })
    }
     // 运行结果:我是box1   我是box2

    运行结果:依次打印不会覆盖,它可以多次绑定同一个事件并且不会覆盖上一个事件。

  • 相关阅读:
    NET 事件与委托
    NET高级 REF OUT
    缓冲池
    NET高级 EQUAL相等
    装箱拆箱
    CTS、CLS、CLR
    结构体及引用类型
    NET高级-深拷贝浅拷贝
    密闭类 静态 类及扩展方法
    NET高级-索引器
  • 原文地址:https://www.cnblogs.com/gr07/p/7911093.html
Copyright © 2011-2022 走看看