时间戳

首页 > 解决方案 > 具有事件委托的多个元素上的 JavaScript addEventListener

javascript - 具有事件委托的多个元素上的 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>

标签： javascripthtmlcssevent-delegation

解决方案

如果你真的想知道你的 DOM 结构中的父元素之一是否属于类 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>

推荐阅读