javascript - 将 jQuery 的 .on ('mouseenter' ) 重写为纯 JS 变体

Question

我有一个包含其他 div 元素的容器 div:

<div id="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

如何用纯 JS 重写以下 jQuery？

$('#container').on('mouseenter', 'div', myFunction)

也就是说，我如何监听哪个子鼠标悬停在其上以便应用于它myFunction？我已尝试以下操作，但这仅适用于 myFunction 容器 div:

container.addEventListener('mouseenter', function(event) {
  let hoveredElement = event.target;
  if (hoveredElement.tagName === 'DIV') {
    myFunction(hoveredElement);
  }
});

#container { width: 200px; }
#container > div  { height: 100px; background-color: red; }

<div id="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我也尝试过 event.currentTarget，但它仍然给出相同的结果。

附:我不想将事件监听器放在容器 div 的子级上，因为有大量的子级。

编辑:我已经删除了console.log(hoveredElement);这是一行用于调试的行。

Answer 1

我在 Chrome 上调试了 jQuery，jQuery mouseenter 事件实际上在幕后使用 mouseover 事件。

在 jQuery 源代码的第 4095 行中，有一行在每次触发事件时运行:

jQuery.event.dispatch.apply( elem, 参数 );

如果您暂停并检查参数，您会发现它是一个类型为mouseover的MouseEvent。

这是有道理的，因为您使用的是 jQuery 的委托(delegate)事件处理程序语法，并且 jQuery 足够聪明，可以替代 mouseenter which doesn't bubble and doesn't trigger as you move through the event handler's descendents 鼠标悬停 which does fire when you move through the listener's children 。

因此，您的解决方案本质上将执行 jQuery 正在执行的操作 - 使用 mouseover:

container.addEventListener('mouseover', function(event) {
  console.log("mouseover target", event.target);
  console.log("mouseover currentTarget", event.currentTarget);
});

container.addEventListener('mouseenter', function(event) {
  console.log("mouseenter target", event.target);
  console.log("mouseenter currentTarget", event.currentTarget);
});

$('#container').on('mouseenter', '.child', function(event) {
  console.log('jquery mouseenter target', event.target);
  console.log('jquery mouseenter currentTarget', event.currentTarget);
  console.log('jquery mouseenter delegateTarget', event.delegateTarget);
});

.child {
  border: 1px solid #007;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>

<div id="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>