共同点
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中写