js中常用绑定事件的事件代理/委托？

事件代理，又称事件委托，将原本应该绑定在子元素身上的事件绑定在父元素身上，让父元素担当事件监听的职务，本质是触发事件冒泡。

优点：提高性能，节约内存，新添加的子元素也能绑定上事件。

缺点：使用不当会造成事件在不应该触发时触发。

css的代码

<style>
        ul {
            background-color: pink;
        }

        li {
            border: 1px solid red;
            width: 300px;
        }
    </style>

    <button>添加</button>
    <ul>
        <li class="myli">列表1</li>
        <li class="myli">列表2</li>
        <li class="myli">列表3</li>
    </ul>

js代码

let myli = document.querySelectorAll(".myli");
        let but = document.querySelector("button");
        let ul = document.querySelector("ul");
        let num = 3;
        but.onclick = function () {
            let li = document.createElement("li")
            num++;
            li.innerHTML = "列表" + num;
            li.className = "myli";
            ul.appendChild(li);
        }
        // 事件代理（事件委托），将原本应该绑定在子元素身上的事件绑定在父元素身上
        ul.onclick = function (e) {//触发ul和li
            console.log(e);
            console.log(111);
            if (e.target.className == "myli") {//事件对象e里面的类名
                console.log(e.target.innerHTML);
            }
        }

示例

点击添加按钮，添加列表