多个子元素的单个事件侦听器

Question

考虑以下 HTML 代码：

<section>
    <div id="left-box"></div>
    <div id="middle-box"></div>
    <div id="right-box"></div>
</section>

我想在每次单击上述框之一时更改 <section> 的颜色。我不是在介绍 CSS。是否可以只使用一个而不是使用 3 个事件侦听器来处理 3 个框上的单击事件？我听说过片段。有什么想法吗？

Answer 1

如果将事件侦听器附加到 section，则可以找到被单击的元素。

var section = document.getElementsByTagName('section')[0];
section.addEventListener('click', function(e) {
    console.log(e.toElement);
});

Answer 2

您可以在包含三个 <div> 元素的 <section> 上使用单个侦听器，然后检查 event.target 以查看是否单击了其中一个元素。因此，如果您单击三个框之一而不是父 <section> 元素，您的代码只会运行。

举个例子。为了清楚起见，我添加了一个 ID class 和一些 CSS。

var section = document.getElementById("container");

container.addEventListener("click", function(e) {
  if (e.target.className == "box") {
    // You clicked on a box
    container.style.backgroundColor = e.target.style.backgroundColor;
  }
});

document.getElementById("left-box").style.backgroundColor = "red";
document.getElementById("middle-box").style.backgroundColor = "green";
document.getElementById("right-box").style.backgroundColor = "blue";

#container {
  background-color: yellow;
  display: inline-block;
  padding: 10px;
}

#container>div {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid yellow;
  display: inline-block;
}

<section id="container">
  <div class="box" id="left-box"></div>
  <div class="box" id="middle-box"></div>
  <div class="box" id="right-box"></div>
</section>

多个子元素的单个事件侦听器

Single event listener for multiple child elements

javascript

dom-events