addEventListener和on的共同点和区别-CSDN博客

共同点

1.它们都是给dom节点添加监听事件。例：

document.getElementByClassName('echart').addEventListener('mouseover',
this.EventMouse)或者document.getElementByClassName('echart').onmouseover
= this.EventMouse这两种方法都是给echart节点添加一个鼠标移入事件
复制代码

注意：前者mouseover不是onmouseover，如果是后者则没有效果，后者是onmouseover而不是mouseover

不同点

（1）前者允许对一个dom添加多个监听器，而且都会被触发，后台可以对一个dom添加多个点击事件但是后者会覆盖前者

（2）前者提供了一种更精细的手段控制事件监听器的触发阶段。（比如捕获或冒泡），后者只在冒泡阶段触发。例如：element.addEventListener(event, function, useCapture)

event:(必需)事件名，支持所有dom事件

function：（必需）指定要事件触发时执行的函数

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获，false，冒泡，默认false

（3）前者对任何dom元素都是有效的，后者仅仅对html元素有效。

（4）前者可以解除事件绑定，后者无法解除事件绑定

js点击事件的三种方式

在js中可以为某个元素指定事件，指定的方式有以下三种

1.在html中使用onclick属性

2.在js中使用onclick属性

3.在js使用addEventListener方法

三种方法的比较

（1）在第一种方法中，onclick大小写都可以，但在第二种方法中，必须使用小写。因为html对大小写不敏感，而js则会区分大小写。

（2）第一种方法需要括号，第二、第三种不需要，例如：

onclick="clickHandle()"
document.getElementByClassName('btn').onclick = clickHandle
document.getElementByClassName('btn').addEventListener('click', clickHandle)
addEventListener相当于on
以上三种方法是等价的。
复制代码

vue的html中只能写vue事件不能写js事件不然无法识别会报错，如果要写js事件只能在js中写