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没有将事件监听器放在父（#container）元素上？

Answer 1

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

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

此属性在.delegate()或.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>

Answer 2

简单地说，＆＃34;＃foo＆＃34;是当前的DOM元素，因为这是您单击的内容。它只是一个DOM元素，其父母（或父母的父母等）恰好是＃34;＃container＆＃34;。

因此，您的问题的答案是＆＃34; 事件冒泡阶段中的当前 DOM元素。＆＃34; [根据jQuery文档）是＆＃34;＃foo＆＃34;。

同样，如果您致电$(document).on("click","#foo",...，您当前的目标也将是＃34;＃foo＆＃34;。

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

2 个答案: