事件委派

將監聽事件綁定在父層，利用事件物件（Event Object）來檢查目標元素是否為選取的對象，進而執行陳述事項。透過此方式，後續建立的子元素亦能執行陳述事項。

HTML

<div class="box" id="Box">
  <ul>
    <li><a href="javascript:;"></a></li>
    <li><a href="javascript:;"></a></li>
    <li><a href="javascript:;"></a></li>
    <li><a href="javascript:;"></a></li>
    <li><a href="javascript:;"></a></li>
  </ul>
</div>

JavaScript

document.querySelector('#Box').addEventListener('click', (e) => {
  console.log(e.target);
});

CSS

body {
  font-family: Arial, Helvetica, "微軟正黑體", sans-serif;
}

.box,
.box ul,
.box li,
.box a {
  padding: 30px;
}

.box ul,
.box li,
.box a {
  margin-top: 30px;
}

.box {
  background-color: pink;
}

.box ul {
  list-style-type: none;
  margin-bottom: 0;
  background-color: brown;
}

.box li {
  background-color: yellowgreen;
}

.box a {
  display: block;
  color: #fff;
  text-decoration: none;
  background-color: tomato;
}

.box::before {
  content: '我是 div';
}

.box ul::before {
  content: '我是 ul';
  color: #fff;
}

.box li::before {
  content: '我是 li';
}

.box a::before {
  content: '我是 a';
}

另一方面，也不需要為所有的子元素加入事件監聽，讓效能浪費。

HTML

<div id="BtnWrap">
  <input type="button" value="黑桃">
  <input type="button" value="紅心">
  <input type="button" value="方塊">
  <input type="button" value="梅花">
</div>

JavaScript

document.querySelector('#BtnWrap').addEventListener('click', (e) => {
  const { target } = e;

  if (target.nodeName === 'INPUT' && target.type === 'button') {
    console.log(target.value);
  }
});