event.currentTarget的真实生活用法？

Question

很明显event.target处理发起事件的DOM元素  而且 - event.delegateTarget提供了我们实际附加侦听器的DOM元素，

但我很难理解我何时会使用 - event.currentTarget：

查看显示此示例的jQuery示例：JSBIN1

它似乎与event.delegateTarget

完全相同

$( "body" ).click(function( event ) {
  $( "#log" ).html( "clicked: " + event.currentTarget.nodeName );
});

我点击的任何地方 - 它说：点击＆＃34; BODY＆＃34; - 这与delegateTarget的行为完全相同

问题

我将使用哪些（现实生活）场景event.currentTarget？ （非常感谢例子）

nb - 无法找到任何currentTarget vs delegateTarget问题....

Answer 1

event.target和event.currentTarget是W3C规范定义的Event interface的属性：

• event.target：

    

  事件对象的此属性是调度事件的对象   上。当事件处理程序不同时，它与event.currentTarget不同   在鼓泡或捕捉事件的阶段被召唤。

• event.currentTarget：

    

  在事件遍历时标识事件的当前目标   DOM。它总是引用事件处理程序的元素   附加到而不是标识元素的event.target   事件发生了。

此外，jQuery添加了event.delegateTarget：

  

附加当前调用的jQuery事件处理程序的元素

与event.currentTarget的区别在

中解释

  

此属性最常用于附加的委派事件   .delegate()或.on()，其中事件处理程序附加在   正在处理的元素的祖先。它可以用于，例如，   在委派点识别和删除事件处理程序。

     

对于直接附加到元素的非委托事件处理程序，   event.delegateTarget始终等于event.currentTarget。

例如，如果单击以下HTML中的按钮：

<div class="box">
    <button>Button</button>
</div>

$( "body" ).on( "click", ".box", function(e) {
    e.delegateTarget; // body
    e.currentTarget;  // .box
    e.target;         // button
});

Answer 2

如果您有HTML标记，如下所示

<a href="http://www.someurl.com" data-ajax="true" data-id="345">
    <img src="company.jpg"/>
</a>

你有绑定处理程序来锚定

$("a").click(function(){
    // Some stuff
});

现在，点击处理程序event.target指向图像但您实际上已点击了锚点，在点击处理程序中，您需要访问锚点的data-id属性以执行某些操作。在这里获取当前目标，您可以使用event.currentTarget来访问锚点。

Answer 3

event.currentTarget属性是当前响应DOM事件的元素，DOM事件是绑定事件处理程序的元素。至于现实世界的用法？不太确定。