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 );
});

我点击的任何地方 - 它说:点击"BODY" - 这与delegateTarget的行为完全一样

题

我会使用哪种(现实生活)场景event.currentTarget？(例子将非常感谢)

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

Answer 1

event.target并且event.currentTarget是W3C规范定义的Event接口属性:

• event.target:

  事件对象的此属性是调度事件的对象.它与event.currentTarget在冒泡或捕获事件阶段中调用事件处理程序时不同.

• event.currentTarget:

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

另外,jQuery增加了event.delegateTarget:

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

区别event.currentTarget在于解释

此属性通常在由.delegate()or 附加的委托事件中有用 .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
});