美文网首页
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辨析

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