javascript - 为什么 e.currentTarget 会随着 jQuery 的事件委托(delegate)而改变？

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 的理解是它反射(reflect)了事件冒泡到的点。因为我在 #container 元素上有一个事件监听器，所以我希望 currentTarget 在这两种情况下都是 container。

这对于标准的 on 处理程序是正确的，如第一个示例所示。然而，当使用事件委托(delegate)时(第二次点击时的 #foo 参数)，currentTarget 变为内部按钮。

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

Answer 1

基本上这是因为幕后的 jQuery 魔术。包装 native 事件的 jQuery 事件对象正在更改 currentTarget，使其更方便。

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

This property is most often useful in delegated events attached by .delegate() or .on(), where the event handler is attached at an ancestor of the element being processed. It can be used, for example, to identify and remove event handlers at the delegation point.

For non-delegated event handlers attached directly to an element, event.delegateTarget will always be equal to 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>