js:addEventListener与onclick同时使用

js:addEventListener与onclick同时使用

点击


document.getElementById("btn").addEventListener('click', function (e) {
  console.log("点击了button1");
})

document.getElementById("btn").addEventListener('click', function (e) {
  console.log("点击了button2");
})

document.getElementById("btn").onclick = function (e) {
  console.log("点击了button3");
}

document.getElementById("btn").onclick = function (e) {
  console.log("点击了button4");
}

点击按钮后输出如下

点击了button1
点击了button2
点击了button4

可以看到，点击了button3 并没有输出，原因是两次onclick 赋值，后一次的值把前一次的覆盖了。

总结：

• addEventListener(‘click’, function) 相当于 push(function)
• onclick = function 直接覆盖