JavaScript: 最简单的事件代理（JS Event Proxy）原理代码

打开 http://jsbin.com (JS练兵场），方便尝试使用案例代码。

假设有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是否为我们所期望的那个。