event.currentTarget的真实生活用法?

时间:2014-06-22 15:15:01

标签: jquery

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

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

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

它似乎与event.delegateTarget

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

enter image description here

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

问题

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

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

3 个答案:

答案 0 :(得分:5)

event.targetevent.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
});

答案 1 :(得分:0)

如果您有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来访问锚点。

答案 2 :(得分:0)

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