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