事件委托

什么是事件委托, 就好比你买的快递, 他一般不可能给你一户一户送到家, 那太累了, 一般会统一送到菜鸟驿站, 蜂巢, 代收点, 然后通知你去收货

事件委托是利用事件流的特性解决一些开发需求的知识技巧

有什么用呢?

html

<ul>
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
</ul>

我这里有一个列表, 我要给每一个li做点击监听, 是不是要用循环一个个注册, 不仅麻烦, 还占用程序性能

通过事件委托, 我们可以减少注册次数可以提供程序性能

原理: 其实就是利用了事件冒泡的特点, 给它的父元素注册事件, 当我们触发子元素的时候, 会冒泡到父元素身上, 从而触发父元素的事件

html

<ul>
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
</ul>
<script>
    document.querySelector("ul").addEventListener("click", (Event) => {
        console.log(Event)
        alert(Event.target.textContent)
    })
</script>

b16ddbe209683412fc43f20388de3d8d9e122778

通过Event.target获取被点击的子元素对象, 用textContent获取值

事件委托 ​

事件委托