JS 中，onclick 和 addEventListener 的区别？

onclick：

优点

1. 简单；
2. 处理事件的 this 关键字指向当前元素；

缺点

1. 只能使用冒泡事件；
2. 同一个事件，一次只能对一个元素设置一个，多了后者会覆盖前者；

let cxk = document.getElementById('cxk')

cxk.onclick = () => {
  console.log('sing')
}
cxk.onclick = () => {
  console.log('dance')
}

// dance

 

addEventListener：

优点

1. 对同一个元素绑定多个同样的事件，事件不会被覆盖；
2. 支持捕获事件，通过 addEventListener 的第三个参数来设置；（默认是冒泡）
3. 支持事件只允许被调用一次的修饰符；（通过第三个参数来设置）
4. 一般使用 addEventListener 的第三个参数中的 passive 改善的滚屏性能，添加 passive 参数后，touchmove 事件不会阻塞页面的滚动（同样适用于鼠标的滚轮事件）；

addEventListener 的第三个参数是个对象（可选）：

options：

1. capture 如果为 true，则表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发；
2. once 如果为 true，则表示 listener 在添加之后最多只调用一次，并且 listener 会在第一次调用之后会自动移除；
3. passive 如果为 true，则表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告；

let cxk = document.getElementById('cxk')

cxk.addEventListener('click', () => {
  console.log('sing')
})
cxk.addEventListener('click', () => {
  console.log('dance')
})

// sing
// dance

 

ok完结，撒花 🌸✨🌼🌻🌺