使用on和addEventListener的区别是什么？

4 min read

on 和 addEventListener 都是用于添加事件处理程序的方法。它们的区别在于：

  1. on 是一个属性，可以直接在元素上设置。例如：element.onclick = function() { ... }。
    addEventListener 是一个方法，需要通过调用元素的 addEventListener 方法来添加事件处理程序。
    例如：element.addEventListener('click', function() { ... })。

  2. on 只能同时为一个事件添加一个处理程序。如果再次设置同一个事件的处理程序，则会覆盖之前的处理程序。
    addEventListener 可以为同一个事件添加多个处理程序。

  3. on 常常用于处理简单的事件，例如点击、鼠标移入移出等。而 addEventListener 则用于处理更复杂的事件，例如动画结束事件、过渡事件、鼠标滚动事件等。

总的来说，addEventListener 更加灵活，也更加推荐使用。