javascript中事件绑定的on和addEventListener的区别

1.on

on是DOM L0级别的

on的用法：

事件源.on事件 = 函数

// 用法1

let div = document.querySelector('div')
div.onclick = function(){
      console.log("这是用法")
}

用on绑定事件，只能实现单次绑定，如下，对同一个事件源绑定同一个事件类型，只会覆盖掉前面的

let div = document.querySelector('div')
div.onclick = function(){
      console.log("这是1号")
}


div.onclick = function(){
      console.log("这是2号")
}

2.addEventListener

而addEventListener是DOM L2级别的

addEventListener的用法：

事件源.addEventListener("事件类型'，触发的函数)

const div = document.querySelector('div')

div.addEventListener('click',function(){
         console.log("这是1")
})




function div2(){
 console.log("这是2")
}

div.addEventListener('click',div2)


div.addEventListener('click',(e) => console.log("这是3") )

addEventListener不会替换，如果点击的话，那么就会在控制台打印
“这是1”

“这是2”

“这是3”

所以推荐使用addEventListener

结合上面的，我们归纳有如下区别：

1. 响应方式：使用 `on` 绑定事件只能绑定一个响应函数，而使用 `addEventListener` 可以绑定多个响应函数。

2. 事件绑定的时间：使用 `on` 绑定事件的方式是直接在元素上为其设置属性，因此只能在元素创建时绑定事件。而 `addEventListener` 方法可以随时为元素添加新事件，而不影响其他已添加的事件。

3. 事件处理流程：使用 `on` 绑定事件会覆盖原有的事件处理函数，因为它只能绑定一个响应函数。而 `addEventListener` 可以为一个元素添加多个事件处理函数，它们按照添加的顺序依次执行。在通常情况下，在使用 `addEventListener` 时我们需要使用 `removeEventListener` 方法来删除事件监听器。

4. 兼容性：`on` 属性是早期浏览器提供的事件绑定方式，而 `addEventListener` 方法是后期推出的标准事件绑定方式。考虑到浏览器的兼容性问题，现在更推荐使用 `addEventListener` 方法来绑定事件，而不是使用 `on` 属性。

综上所述，使用 `addEventListener` 绑定事件更加灵活、方便且可扩展性强，是目前推崇的标准方式。