JavaScript 在具有事件委托的多个元素上添加事件监听器

Question

我想在具有事件委托的多个元素上使用 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>

Answer 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>

JavaScript 在具有事件委托的多个元素上添加事件监听器

JavaScript addEventListener on multiple element with event delegation

html

javascript

css

event-delegation