將addEventListener（）總是有ev.currentTarget和「this」作爲我們觀察的元素？

Question

這是真的，在普通的JavaScript，如果我們觀察elementFoo：

elementFoo.addEventListener("click", function(ev) { 
    console.log(ev.currentTarget, this); 
}); 

然後ev.currentTarget和this永遠是elementFoo？

這是一個有點難以記住，因爲jQuery中，如果我們委託事件：

$("#table-foo").on("click", "tr", function(ev) { 
    console.log(ev.currentTarget, this); 
}); 

然後ev.currentTarget和this都將是tr元素。是不是真的使用addEventListener()，它不能有這種行爲？ （唯一的辦法是讓ev.target作爲td元素，但從來沒有tr

Answer 1

這是真的，在普通的JavaScript，如果我們觀察 elementFoo：...然後ev.currentTarget，這將永遠是？ elementFoo

是你可以閱讀一下here：

它總是裁判事件處理程序已附加到 的元素，而event.target標識事件發生的元素。

我沒有看到矛盾：

例如，如果你有this：

你點擊span：然後：

$("body").on("click", "p", function(e) { 
    console.log("delegateTarget" , e.delegateTarget.nodeName) //BODY 
    console.log("currentTarget" ,e.currentTarget.nodeName) //P 
    console.log("target" , e.target.nodeName)   //SPAN 
    console.log("this" , $(this)[0].nodeName)  //P - the middle atached element 
}); 

將產量：

delegateTarget BODY 
currentTarget P 
target SPAN 
this P 

Answer 2

你試圖實現的事情叫做「事件委託」。 在JavaScript事件是泡沫。所以父元素可以知道你觸發了哪個元素事件，在你的情況下，你甚至需要連接頂層元素和邏輯內部檢查哪個元素被點擊。類似的方法（但更復雜），它在jQuery和任何其他有事件委託的框架中工作。

下面是如何使用https://jsfiddle.net/49w3zvmL/

var elementFoo = document.getElementById('foo'); 
elementFoo.addEventListener("click", function(e) { 
    if(e.target && e.target.nodeName === 'SPAN') { 
     alert('click on span'); 
    }else{ 
     alert('click on div'); 
    } 
}); 

短的例子，這裏有環節，進一步參考：
https://developer.mozilla.org/en-US/docs/Web/API/Event/target
https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles