假設有HTML

<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2" class="item-2 focused">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">
 
Item 6</li>
</ul>

我們可以採用 e.target.matches 介面匹配 css selector 的方式。

document.addEventListener('DOMContentLoaded', function() {
  // 真正的開始，在這裡。DOMContentLoaded 事件只是為了等DOM載入好了。
  const root = document.getElementById('parent-list');

  // 被監聽的事件，要註冊在父親節點中的某一個，一般是在模組根級別的那個。
  root.addEventListener('click'
 
, function(e) {
    if (e.target) {    // <-- 我們就是要判斷 e.target 是誰
      if (e.target.matches('#post-1')) {
        // 判斷的 selector 跟 document.querySelector() 用的是一樣的。
        // 判斷如果是 #post-1，那麼就 ...
        alert('you are clicking #post-1');
      } else if (e.target.matches('li.item-2.focused')) {
        // 判斷如果是 li.item-2.focused，那麼就 ...
 

        alert('you are clicking #post-2, which is li.item-2.focused');
      }
    }
  });
});

執行，可以看到結果。

思路是：我們通過將想要監聽的事件，註冊到 parent 級別的 Dom 物件上，然後通過回撥函式的第一個引數 event 的 event.target 屬性來判斷事件發生在誰身上。當然，我們需要匹配一下，就通過 event.target.matches(cssSelector) 來判斷事件所在的Dom是否為我們所期望的那個。