美文网首页
e.target,e.currentTarget辨析

e.target,e.currentTarget辨析

作者: pz明 | 来源:发表于2017-08-03 23:46 被阅读32次

一、概述

事件监听中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区别

相关文章

  • e.target,e.currentTarget辨析

    一、概述 事件监听中e有target和currentTarget两个属性,target只会出现在事件流目标阶段,c...

  • wxmp_note2

    e.target与e.currentTarget 如果你点击的是添加事件元素的子元素,就用e.currentTar...

  • e.target与e.currentTarget

    通过一个例子来看e.target与e.currentTarget的区别与联系 1. 关于 a.addEventLi...

  • e.target与e.currentTarget的区别

    在Dom事件对象中有两个属性总是傻傻记不住,就是e.target和e.currentTarget。在MDN中tar...

  • e.target 和 e.currentTarget 的区别

    大家开发中经常会跟DOM的事件打交道,也会经常用到e.target和e.currentTarget这两个对象,但是...

  • e.target?e.currentTarget?

    同样是生活在一个事件里的target,节点的差距怎么就这么大呢?为什么要有两个target呢?对于同一个节点而言,...

  • e.target和e.currentTarget

    原文连接:https://blog.csdn.net/u013746071/article/details/522...

  • e.target 与 e.currentTarget

    MDN 中对 target的解释为:一个触发事件的对象的引用,当事件处理程序在事件的冒泡或捕获阶段被调用时。对于 ...

  • e.target与e.currentTarget的区别

    在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两...

  • 【js进阶】e.target和e.currentTarget

    MDN中对target的解释为,一个触发事件的对象的引用, 当事件处理程序在事件的冒泡或捕获阶段被调用时。 而对于...

网友评论

      本文标题:e.target,e.currentTarget辨析

      本文链接:https://www.haomeiwen.com/subject/ccpmlxtx.html