e.target,e.currentTarget辨析

一、概述

事件监听中e有target和currentTarget两个属性,target只会出现在事件流目标阶段,currentTarget可能出现在事件流捕获、目标、冒泡中任一阶段。

二、区分

e.target是触发事件元素,e.currentTarget是事件监听元素,一般情况下两者指向相同,事件委托时往往e.target指向子元素而e.currentTarget指向父元素。
 一般情况下:

<div id="div">
    <button id="button">按钮</button>
</div>
<script>
     button.addEventListener("click",function(){
        console.log(e.target);//button
        console.log(e.currentTarget);//button
});
</script>

事件委托时:

<div id="div">
    <button id="button">按钮</button>
</div>
<script>
     div.addEventListener("click",function(){
        console.log(e.target);//button
        console.log(e.currentTarget);//div
});
</script>

(DOM事件处理函数中this指向e.currentTarget)

JS事件:target与currentTarget区别
事件冒泡、事件捕获和事件代理
target、this、currentTarget区别

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容