在javascript中的currentTarget屬性和目標屬性之間的確切區別是什麼

Question

任何人都可以告訴我具有示例的Javascript事件中的currentTarget和target屬性之間的確切區別，以及在哪種情況下使用哪個屬性？

Answer 1

基本上，events bubble默認所以兩者之間的區別在於：

• target是觸發事件的元素（例如，用戶點擊了）
• currentTarget是元素，事件監聽器被附加到。

請參閱blog post的簡單說明。

Answer 2

target =觸發事件的元素。

currentTarget =偵聽事件的元素。

Answer 3

如果不堅持，試試這個：

當前在currentTarget是指本。這是最近的目標，它引發了從其他地方冒出的事件。

Answer 4

最小示例

window.onload = function() { 
 
    var resultElem = document.getElementById('result') 
 
    document.getElementById('1').addEventListener(
 
    'click', 
 
    function(event) { 
 
     resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>') 
 
     resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>') 
 
    }, 
 
    false 
 
) 
 
    document.getElementById('2').dispatchEvent(
 
      new Event('click', { bubbles:true })) 
 
}

<div id="1">1 
 
    <div id="2">2 
 
    </div> 
 
</div> 
 
<div id="result"> 
 
    <div>result:</div> 
 
</div>

當2被點擊並列出上1，其結果是：

target: 2 
currentTarget: 1 

因爲在這種情況下：

• 2是發起事件
• 1的元素是聽取事件

Answer 5

event.target是從哪個事件起源的節點上，即該元素。無論您放置事件偵聽器（在段落還是跨度上），event.target都指節點（用戶單擊的位置）。

event.currentTarget，相反，指的是當前事件偵聽器所連接的節點。 IE瀏覽器。如果我們在段落節點上附加了事件偵聽器，則event.currentTarget引用段落，而event.target仍然引用span。 注意：如果我們在body上還有一個事件監聽器，那麼對於這個事件監聽器，event.currentTarget引用body（即，事件提供者作爲輸入提供的事件每次事件冒泡一個節點時被更新）。

Answer 6

<style> 
 
    body * { 
 
    margin: 10px; 
 
    border: 1px solid blue; 
 
    } 
 
</style> 
 

 
<form onclick="alert('form')">FORM 
 
    <div onclick="alert('div')">DIV 
 
    <p onclick="alert('p')">P</p> 
 
    </div> 
 
</form>

如果點擊上面的代碼p標籤，那麼你將得到三個警報，如果你點擊div標籤，你會得到兩個警告和一個警報上單擊窗體標籤。 現在你看看下面的代碼，

<style> 
 
    body * { 
 
    margin: 10px; 
 
    border: 1px solid blue; 
 
    } 
 
</style> 
 
<script> 
 
function fun(event){ 
 
    alert(event.target+" "+event.currentTarget); 
 
} 
 

 
</script> 
 

 
<form>FORM 
 
    <div onclick="fun(event)">DIV 
 
    <p>P</p> 
 
    </div> 
 
</form>

我們剛剛從P與標籤的onclick刪除，現在當我們點擊我們的p標籤，我們只能得到一個警報：

[對象HTMLParagraphElement] [對象HTMLDivElement]

這裏event.target是[對象HTMLParagraphElement]和event.curentTarget是[對象HTMLDivElement]： 所以

event.target是從哪個事件起源， 和 event.currentTarget節點，在相對的，指的是在其上電流事件偵聽器是attached.To知道更多see bubbling

節點

這裏我們點擊了P標籤，但是我們沒有在P上的監聽器，而是在它的父元素div上。