具有事件委托的多个元素上的 JavaScript addEventListener答案

【问题标题】：JavaScript addEventListener on multiple element with event delegation具有事件委托的多个元素上的 JavaScript addEventListener
【发布时间】：2021-03-06 12:17:12
【问题描述】：

我想在带有事件委托的多个元素上使用addEventListener。

我想要的是将点击事件添加到.node，包括动态元素。

我试过下面的代码，但是当我点击.title、.image 或.subtitle 时，target 是不同的。

那么有什么方法可以让.node 忽略层次结构的元素？

提前致谢:)

document.querySelector(".nodes").addEventListener("click", function (e) {
  var target = e.target;
  if (target.classList.contains("node")) {
    alert("node");
  }
});

.node {
  width: 100px;
  height: 100px;
}
.image {
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="nodes">
      <div class="node">
        <div class="image"></div>
        <div class="title">title <span class="subtitle">123</span></div>
      </div>
      <div class="node">
        <div class="image"></div>
        <div class="title">title <span class="subtitle">456</span></div>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

这能回答你的问题吗？ Find the closest ancestor element that has a specific class

标签： javascript html css event-delegation

【解决方案1】：

如果你真的想知道你的DOM结构中的一个父元素是否属于class node，那么你可以使用closest(selector)。在下文中，我们将更改节点的样式（如果存在）：-

document.querySelector(".nodes").addEventListener("click", function (e) {

  var target = e.target;
  const node = target.closest(".node");
  if (node) {
    node.style.background = 'green';
  }
});

.node {
  width: 100px;
  height:100px;
}
.image {
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="nodes">
      <div class="node">
        <div class="image"></div>
        <div class="title">title <span class="subtitle">123</span></div>
      </div>
      <div class="node">
        <div class="image"></div>
        <div class="title">title <span class="subtitle">456</span></div>
      </div>
    </div>
  </body>
</html>

【讨论】：