为什么e.currentTarget会随着jQuery的事件委托而改变？

Question

http://jsbin.com/xaguxuhiwu/1/edit?html,js,console,output

  <div id="container">
    <button id="foo">Foo button</button>
    <button id="bar">Bar button</button>
  </div>

$('#container').on('click', function(e) {
  var targetId = e.target.getAttribute('id');
  // Manually do event delegation
  if (targetId === 'foo') {
    var currentId = e.currentTarget.getAttribute('id');
    console.log('without delegation, currentTarget is: ' + currentId);
  }
});

$('#container').on('click', '#foo', function(e) {
    var currentId = e.currentTarget.getAttribute('id');
    console.log('with delegation, currentTarget is: ' + currentId);
});

基本上,我对事件的e.currentTarget的理解是它反映了事件冒泡的点.由于我在#container元素上有一个事件监听器,我希望currentTarget可以container在两个场景中使用.

对于标准on处理程序,这是正确的,如第一个示例所示.但是,当使用事件委托(#foo第二次单击时的参数)时,currentTarget将更改为内部按钮.

为什么e.currentTarget两种情况之间会发生变化？具体来说,在后一种情况下,这是否意味着jQuery没有将事件监听器放在parent(#container)元素上？

Answer 1

基本上这是因为幕后的jQuery魔术.包装本机事件的jQuery事件对象正在改变currentTarget,可能更方便.

要访问通常指向的值currentTarget,jQuery事件具有delegateTarget.

此属性通常在由.delegate()or 附加的委托事件中有用.on(),其中事件处理程序附加在正在处理的元素的祖先上.例如,它可用于在委派点识别和删除事件处理程序.

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

你可以看到,在originalEvent,currentTarget有值你所期望的.

$('#container').on('click', function(e) {
    console.log('without delegation:');
    console.log('target: ' + e.target.getAttribute('id'));
    console.log('currentTarget: ' + e.currentTarget.getAttribute('id'));
    console.log('originalEvent.currentTarget: ' + e.originalEvent.currentTarget.getAttribute('id'));
    console.log('delegateTarget: ' + e.delegateTarget.getAttribute('id'));
    console.log('--');
});
$('#container').on('click', '#foo', function(e) {
    console.log('with delegation:');
    console.log('target: ' + e.target.getAttribute('id'));
    console.log('currentTarget: ' + e.currentTarget.getAttribute('id'));
    console.log('originalEvent.currentTarget: ' + e.originalEvent.currentTarget.getAttribute('id'));
    console.log('delegateTarget: ' + e.delegateTarget.getAttribute('id'));
    console.log('--');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
    <button id="foo">Foo button</button>
    <button id="bar">Bar button</button>
</div>