事件绑定方式总结

Posted 2022-12-04 iiiLISA

1、事件绑定的方法
（1）在DOM元素中直接绑定
<button id="btn" @click="printMsg">点击</button>
（2）自定义函数，js中绑定
btn.onclick=function();
(3)绑定事件监听函数
btn.addEventListener("click",printMsg);
注：事件监听有三个阶段：
捕获阶段，目标阶段，冒泡阶段

事件的冒泡：
事件向上传导，当后代元素被触发时，其祖先元素的相同事件也会被触发。
1、使用事件对象取消事件冒泡

function(event)
	event=event||window.event;
	event.cancelBubble=true;
	...

（1）IE8及其以下不能传递event参数，只能使用全局对象window.event。
（2）谷歌浏览器可以使用event，也可以使用window.event。
（3）火狐浏览器只能使用event事件对象传递参数。
2、使用@click.stop阻止事件冒泡
阻止事件默认行为：@click.prevent
事件制作用在元素本身，而不是其子元素@click.self
事件的委派：
将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
利用事件冒泡，通过委派可以减少事件的绑定次数，提高程序的性能。

event.target

通常获取目标事件源就是谁是调用者谁就是事件源。但当批量操作DOM元素时，要判断哪一个dom是事件源就不是很明确了，使用event.target可以准确获取事件源，并在使用过程中比较判断。
event.target：真正触发事件的那个元素。（鼠标点击哪个元素，event.target就是哪个元素）

event.target.nodeName 　　 //获取事件触发元素标签name 
event.target.id　　　　　　 //获取事件触发元素id 
event.target.className　　 //获取事件触发元素classname 
event.target.innerhtml　　 //获取事件触发元素的内容