JS中对事件代理的理解以及应用场景

事件代理：把一个元素响应事件的函数委托到另一个元素上，也叫事件委托；

事件流的三个阶段：1、捕获阶段----->2、目标阶段----->3、冒泡阶段；

事件代理（事件委托）主要就是利用了冒泡的特点；

好处： 提高性能，减少事件绑定，从而减少内存占用

应用场景一：

<ul id="list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

    /*    const liArr = document.querySelectorAll("li");
        //每一个都添加了一个点击事件，消耗内存
        liArr.forEach((item) => {
            item.addEventListener("click", (e) => {
                console.log(e.target.innerHTML);
            })
        })*/
    //使用事件委托,只操作一次DOM，从而提高了程序的性能
    const ul = document.querySelector("#list");
    ul.addEventListener("click", (e) => {
        console.log(e.target.innerHTML);
    })

应用场景二： 动态添加了节点或删除了节点

<ul id="list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

    const ul = document.querySelector("#list");
    const btn = document.querySelector("#btn");
    let num = 4;
    //添加列表项
    btn.addEventListener("click", () => {
        num++;
        const oli = document.createElement("li");
        oli.innerHTML = `item${num}`;
        ul.appendChild(oli)
    })
    ul.addEventListener("click", (e) => {
        console.log(e.target.innerHTML);
    })