事件委托

发表于 更新于 分类于 ， 本文字数： 220 阅读时长 ≈ 1 分钟

一、概念

事件委托，用白话来讲就是将事件监听交给自己的祖先元素进行处理。

二、原理

事件委托的实现是根据事件冒泡实现的,利用事件冒泡的特性。对于父元素使用事件监听，当父盒子里面的某个元素被触发时，向上冒泡，触发父元素的事件。利用 target 后去触发冒泡事件的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="father">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>
<script>
    let domUl = document.querySelector('#father')
    domUl.addEventListener('click', (e) => {
        if (e.target.nodeName.toLowerCase() == 'li') {
            console.log(e.target)
        }
    })
</script>

通过 target 下的 nodeName 属性判断。是否是我们需要监听的元素。

三、优点

  • 可以节省大量内存
  • 可以监听动态元素

注意：事件委托需要依赖事件冒泡，如果不支持事件冒泡的元素没办法使用事件委托。