JS-addEventListener和on

发表于

一、使用on方法绑定事件

1
2
3
4
5
6
7
8
9
10
11
window.onload = function(){
    var box = document.getElementById("box")
    box.onclick = function(){
        console.log("我是box1")
    }
    
    box.onclick = function(){
        box.style.fontSize = "18px"
        console.log("我是box2")
    }
}
  • 第一个onclick回调函数会被第二个回调函数覆盖


二、addEventListener绑定事件

1
2
3
4
5
6
7
8
9
10
window.onload = function(){
    var box = document.getElementById("box")
    box.addEventListener("click",function(){
        console.log("我是box1")
    })
    
    box.addEventListener("click",function(){
        console.log("我是box2")
    })
}
  • addEventListener允许在同一个事件上，绑定多个函数
  • 既不覆盖on方法绑定的函数，也不覆盖addEventListener绑定的函数