Javascript中的事件委托机制

**

事件委托机制

**
事件委托的原理是事件添加元素父节点(原理：事件的冒泡机制)。
将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件。
我通过一个在列表添加、修改和删除事件来展示一下事件委托。

案例的HTML代码

<ul>
        <li>列表1 <span class="del">删除</span> <span class="update">修改</span></li>
        <li>列表2 <span class="del">删除</span> <span class="update">修改</span></li>
        <li>列表3 <span class="del">删除</span> <span class="update">修改</span></li>
        <li>列表4 <span class="del">删除</span> <span class="update">修改</span></li>
        <li>列表5 <span class="del">删除</span> <span class="update">修改</span></li>
    </ul>
    <button>添加</button>

CSS代码

<style>
        ul {
            width: 400px;
            margin: 0 auto 0;
            padding: 0;

            list-style: none;
        }

        li {
            line-height: 50px;
            border-bottom: 1px solid red;
        }

        .del,
        .update {
            float: right;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            margin-left: 10px;
            color: #fff;
            text-align: center;
            padding: 0 5px;
        }

        .del {
            background: red;
        }

        .update {
            background: green;
        }

        button {
            display: block;
            margin: 20px auto 0;
        }
    </style>

这个事件委托主要是作用于js，HTML和CSS只是简单布局，着重布局js。
js代码

<script>
        var but = document.getElementsByTagName("button")[0];
        var ul = document.getElementsByTagName("ul")[0];

        //1.添加新的行
        but.onclick = function () {
            var txt = prompt('请输入内容：');
            ul.innerHTML += '<li>' + txt + '<span class="del">删除</span> <span class="update">修改</span></li>'
        };

        //添加 删除  修改  事件  --->事件委托给ul
        ul.onclick = function (e) {
            e = e || window.event;
            if (e.target.innerHTML.trim() == '删除') {
                this.removeChild(e.target.parentNode);
            } else if (e.target.innerHTML.trim() == '修改') {
                var t1 = prompt('请输入新内容：');
                e.target.parentNode.innerHTML = t1 + '<span class="del">删除</span> <span class="update">修改</span>';
            }
        };
    </script>

初入前端，还往大神同志们多多交流指导。