下面的代码有 5 个按钮，如果要点击每个按钮都有对话框的话，是不是要写 5 个事件监听呢？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="allButtons">
      <button>button 1</button>
      <button>button 2</button>
      <button>button 3</button>
      <button>button 4</button>
      <button>button 5</button>
    </div>
  </body>
</html>

其实不需要写 5 次。冒泡阶段时点击按钮触发它的父元素 div，所以监听 div 元素就可以了。这个处理方法就叫事件委托。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="allButtons">
      <button>button 1</button>
      <button>button 2</button>
      <button>button 3</button>
      <button>button 4</button>
      <button>button 5</button>
    </div>
    <script>
      allButtons.addEventListener("click", (event) =>
        alert("clicked " + event.target.textContent)
      );
    </script>
  </body>
</html>