addEventListener 和 on 区别

window.onload = function(){
     var box = document.getElementById("box");
     box.onclick = function(){
         console.log("我是box1");
     }
     box.onclick = function(){
         console.log("我是box2");
     }
}

//运行结果：“我是box2”

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

第二个onclick会把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，而addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。