Taget和currentTaget区别

最新推荐文章于 2021-10-25 10:23:18 发布

2197

最新推荐文章于 2021-10-25 10:23:18 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41047322/article/details/81318437

本文详细解析了JavaScript中事件处理程序中的target和currentTarget属性的区别与联系。通过一个具体的示例，展示了这两个属性在事件冒泡和捕获阶段的行为，帮助读者深入理解DOM事件的处理机制。

target:一个触发事件的对象引用，它标志事件发生的元素，当事件处理程序在事件的冒泡或捕获阶段被调用时。

currentTarget:它总是引用事件处理程序附加到的元素

在事件冒泡阶段两者不相等，但是在事件目标阶段两者是相等的

<ul>
	<li>hello 1</li>
	<li>hello 2</li>
	<li>hello 3</li>
	<li>hello 4</li>
</ul>

let ul=document.querySelectorAll("ul")[0];
let aLi=document.querySelectorAll("li");
ul.addEventListener("click",function(e){
	let oLi1=e.target;
	let oLi2=e.currentTarget;
	console.log(oLi1);//被点击的元素
	console.log(oLi2);//ul
	console.log(oLi1===oLi2)
})