使用事件委托时获取当前冒泡阶段的目标

Question

我有一个包含一些按钮的 div，我想将事件侦听器附加到 div 以侦听从其中的按钮冒出的事件。

我运行遇到的问题是 event.currentTarget 的值似乎与 docs 所说的不匹配。

考虑以下代码：

$('.container').on('click', '.myButton', function(event) {
  console.log("event.currentTarget:");
  console.log(event.currentTarget);

  console.log("event.target: ");
  console.log(event.target);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <button class="myButton">Click Me</button>
</div>

我正在使用 jquery 1.8.3

event.currentTarget 应该是容器 div，但它被设置为其中的按钮。

我该如何解决这个问题。这是一个已知错误还是我做错了什么？

Answer 1

您选择容器 div 的假设与您的事件绑定是错误的。

如果您要执行以下操作：

$('.container').on('click', function(){/**/});

那么您的 event.currentTarget 就是容器。 event.target 可以是下面的任何内容。

如果您添加选择器 .myButton，事件将委托给该选择器，但不会委托给“.container”。

Answer 2

我认为它正在按预期工作。

在上述情况下，事件直接附加到按钮，因此 currentTarget 和 target 将始终相同。

$('.container').on('click', '.myButton', function(event) {}); does not mean that the event is attached to the div. It is just delegating the event. Meaning, the event will bubble up only till .container and the event is still attached ONLY to .myButton

案例 1： 如果事件附加到 div

如果单击按钮，则 currentTarget 将是按钮，目标将是 div。
如果单击 div，则当前目标将为 div，目标也将为 div

例子

$('.container').on('click', function(event) {
  console.log(event.currentTarget);
  console.log(event.target);
});

div{
  border: 1px solid;
  width: 150px;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <button class="myButton">Click Me</button>
  Click me
</div>

情况 2：（您的情况）如果事件附加到按钮，则 currentTarget 和目标将始终是按钮

$('.container').on('click','.myButton', function(event) {
  console.log(event.currentTarget);
  console.log(event.target);
});

div{
  border: 1px solid;
  width: 150px;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <button class="myButton">Click Me</button>
  Click me
</div>

Answer 3

根据http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-currentTarget

event.currentTarget is used to indicate the EventTarget whose EventListeners are currently being processed. This is particularly useful during capturing and bubbling.

所以根据你的代码，它正在做它应该做的事情。要获得 parent，您可以尝试 var $target = $('event.target').parent();

Answer 4

这是因为您使用的是 jQuery 而不是原生 JavaScript。

function testClick(e){
  console.log("event.currentTarget:");
  console.log(event.currentTarget);

  console.log("event.target: ");
  console.log(event.target);
}
$('.container').on('click', '.myButton', testClick);
document.getElementsByClassName('container')[0].addEventListener("click", testClick);

使用事件委托时获取当前冒泡阶段的目标

Getting the target of the current bubbling phase when using event delegation

javascript

jquery

event-delegation

jquery-events