事件委托

定义css样式

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            width: 300px;
            height: 40px;
            line-height: 40px;
            margin: 5px;
            border-bottom: 1px solid black;
        }

        li span {
            float: right;
            width: 60px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #00ffff;
            cursor: pointer;
        }

        button {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            background-color: #ffff00;
        }
    </style>

书写html结构：首先有个按钮用来动态创建li，ul结构里面有li，li内有span用来操作

<button>创建</button>
    <ul>
        <li>1<span>删除</span></li>
        <li>2<span>删除</span></li>
        <li>3<span>删除</span></li>
    </ul>

//用ul来代理span的点击事件，因为span的点击事件会冒泡给ul
//我们通过evt.target来知道，点击的是哪个span

<script>
        var button = document.querySelector('button')
        button.addEventListener('click', function (evt) {
            var li = document.createElement('li')
            li.innerHTML = "新创建的<span>删除</span>"
            document.querySelector('ul').appendChild(li)
        }, false)

        document.querySelector('ul').onclick = function (evt) {
            if (evt.target.tagName === 'SPAN') {
                evt.target.parentNode.remove();
            }
        }
    </script>

//事件代理/事件委托
// 利用事件冒泡原理，用元素们的共同祖先元素，来代理处理事件。

    //  1. 可以处理动态添加的元素的事件
    //  2. 可以避免为每个元素都绑定事件，避免了耗费内存