简单几句话彻底理解Javascript中target与currentTarget的区别

悠悠 2022-12-16 11:00 180阅读 0赞

Javascript中target与currentTarget的区别是老生常谈的问题。尤其是作为面试题可以考察应聘者对于JS事件的理解。

JS中的事件触发是一个**过程**，即  
 捕 获 阶 段 → 目 标 阶 段 → 冒 泡 阶 段 捕获阶段\\rightarrow 目标阶段\\rightarrow 冒泡阶段 捕获阶段→目标阶段→冒泡阶段  
DOM是嵌套的，触发内部元素的之前会先在捕获阶段触发外部元素，之后在冒泡阶段再次触发外部元素。

故**当外部元素的事件被触发，当前的元素就对应了currentTarget，而最终目标元素就是target**。

current意思就是当前的，结合事件是一个**过程**去理解，就知道必然有`当前的&目标的`两个状态。

举个例子

<div id="waiceng">
        <button id="neiceng">我是内层按钮</button>
    </div>
    <script>
        var waiceng = document.getElementById('waiceng');
        var neiceng = document.getElementById('neiceng');
    
        neiceng.addEventListener('click', function(e){ 
            // 输出true，因为当前的元素就是目标元素
            console.log(e.target === e.currentTarget)
        }, false)
    
        waiceng.addEventListener('click', function(e) { 
            // 输出neiceng，因为目标元素是内层，外层只是在内层被触发的过程中被触发的
            console.log(`触发了外层的事件，target为：${ e.target.id}`)。
    
            // 输出waiceng，因为这个外层元素绑定的事件被触发的时候，当前元素是waiceng
            console.log(`触发了外层的事件，currentTarget为：${ e.currentTarget.id}`)
        }, false);  
    </script>

输出如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
最后试图用一个简单的例子做一个总结：

事件触发就像足球射门，比如足球打到后卫的身上，然后弹到球网内。显然这是一个过程。target目标一定是球网，但当打到后卫身上的时候，后卫无辜的说“我觉得你的目标（currentTarget）是我。虽然你最终的目标是球网（target）。”

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221123/65ecaed7b44b4b439440d10103f7781a.png