Javascript 为什么e.currentTarget会随着jQuery&x27；s活动代表团？

Foo按钮
条形按钮
$（“#容器”）。在（'click'，函数（e）上{
var targetId=e.target.getAttribute（'id'）；
//手动执行事件委派
如果（targetId=='foo'）{
var currentId=e.currentTarget.getAttribute（'id'）；
log（'无委托，currentTarget为：'+currentId）；
}
});
$（'#container'）。在（'click'，'#foo'，函数（e）上{
var currentId=e.currentTarget.getAttribute（'id'）；
log（'具有委派，currentTarget为：'+currentId）；
});

基本上，我对事件的e.currentTarget的理解是，它反映了事件发生的时间点。由于我在

#container

元素上有一个事件侦听器，因此在这两种情况下，我希望currentTarget都是

container

这对于标准的

on

处理程序是正确的，如第一个示例所示。但是，当使用事件委派（第二次单击时的

#foo

参数）时，currentTarget变为内部按钮

为什么

e.currentTarget

在这两种情况下会发生变化？

---

具体来说，在后一种情况下，这是否意味着jQuery没有将事件侦听器放在父（

#container

）元素上？

基本上，这是因为jQuery的幕后魔力。包装本机事件的jQuery事件对象正在更改

currentTarget

，这可能更方便

要访问通常由

currentTarget

指向的值，jQuery事件必须

此属性在由

.delegate（）

或

.on（）

附加的委派事件中最常用，其中事件处理程序附加在正在处理的元素的祖先上。例如，它可以用于在委托点识别和删除事件处理程序

对于直接连接到元素的非委托事件处理程序，

event.delegateTarget

将始终等于

event.currentTarget

您可以看到，在

originalEvent

中，

当前目标

具有您期望的值

$（“#容器”）。在（'click'，函数（e）上{
console.log（'无委托：'）；
console.log（'target:'+e.target.getAttribute（'id'）；
console.log（'currentTarget:'+e.currentTarget.getAttribute（'id'）；
log（'originalEvent.currentTarget:'+e.originalEvent.currentTarget.getAttribute（'id'））；
console.log（'delegateTarget:'+e.delegateTarget.getAttribute（'id'）；
console.log（'--'）；
});
$（'#container'）。在（'click'，'#foo'，函数（e）上{
console.log（'with delegation:'）；
console.log（'target:'+e.target.getAttribute（'id'）；
console.log（'currentTarget:'+e.currentTarget.getAttribute（'id'）；
log（'originalEvent.currentTarget:'+e.originalEvent.currentTarget.getAttribute（'id'））；
console.log（'delegateTarget:'+e.delegateTarget.getAttribute（'id'）；
console.log（'--'）；
});

Foo按钮
条形按钮
简单地说，“#foo”是当前的DOM元素，因为这是您单击的元素。它只是一个DOM元素，其父元素（或父元素的父元素等）恰好是“容器”

因此，您的问题的答案是“事件冒泡阶段的当前DOM元素””[根据jQuery文档）是“#foo”

同样，如果调用
$（document）.on（“click”、“#foo”、…
您的当前目标也将是“#foo”。
在第二个函数中，当我单击id=“container”元素中嵌套的id=“foo”元素时，您会告诉jquery“Fire event”"另外，由于您正在预加载html元素，而不是在加载DOM后插入，因此从技术上讲，您不需要
。在
上，在第二个函数中，您可以访问元素
\foo
，而无需先引用元素
\container
。此外，您可以使用
而不是
e.currentTarget
de>.vanilla JS可以将jQuery中的
e.currentTarget.getAttribute（'id'）
更改为
this.id
和
$（this.attr（'id'）
。@AaronEveleth:这不是我对jQuery中
的理解。
.on（）
应该为前面选择器中的任何元素添加一个侦听器。添加第二个参数时（又名使用事件委派），我的理解是，除非
事件.target
与选择器匹配，否则jQuery将不会调用回调函数。关于
此
，我的问题是关于
currentTarget
。该属性在DOM中具有特定语义。jQuery出于未知原因修改currentTarget，或者事实上，事件处理程序的绑定方式与预期不同。据我所知，当您传递第二个选择器时，它将成为新的event.CurrentTarget，如果第一个选择器是在DOM加载之后插入的，它将依赖于第一个选择器在初始DOM加载中存在。如果您像我一样是个书呆子，并且希望了解jQuery在哪里执行此操作。谢谢，这是helps.我想知道为什么框架会这样做？这不总是使得
e.target
==
e.currentTarget
？哦，我回避了我自己的解决方案。假设你有一个由三个部分组成的层次结构：祖父母、父母和孩子。如果你
$（“#祖父母”）。在（'click'，'#parent'，…）
，那么e.target应该是子对象，e.currentTarget（jquery）应该是父对象。@AnilRedshift只是一个猜测，但我怀疑他们可能试图保留过时的
.live
方法的一些行为，我相信该方法使用了不同的事件绑定策略。不过我不确定。耶，appcompat！！
  <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);
});