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

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