javascript - addEventListener()是否始终将ev.currentTarget和“this”作为我们观察到的元素？

如果在elementFoo上观察，在纯JavaScript中是否正确：

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吗？

最佳答案

在纯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