Taget和currentTaget区别

最新推荐文章于 2022-06-30 11:07:13 发布

原创最新推荐文章于 2022-06-30 11:07:13 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解析了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)
})