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

问题描述

我想通过事件委托在多个元素上使用 addEventListener。

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

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

那么有没有办法让 .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>

解决方法

如果您真的想知道 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>

event-delegation html javascript