javascript - 使用事件委托(delegate)时获取当前冒泡阶段的目标

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

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

在上述情况下，事件直接附加到按钮，因此 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

1. 如果单击按钮，则 currentTarget 将是按钮，目标将是 div。
2. 如果单击 div，currentTarget 将为 div，target 也将为 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 和 target 将始终是按钮

$('.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>