用 JavaScript 实现事件代理的方法

将事件处理加载到父级元素上，可避免将事件处理加载到多个子集元素上。
原理：利用的就是事件冒泡和目标元素不去监听所有的子元素事件，只监听他们的父级元素，当某个子元素被触发时，事件会向上冒泡的父级元素。在父级元素事件中，检查event事件源，来判断具体是哪个子元素被选中了。
优点：（1）提供优化性能
           （2）新增元素，之前的事件仍然有效。

事件委托实现原理

事件委托是利用事件的冒泡原理来实现的，大致可以分为三个步骤：

1. 确定要添加事件元素的父级元素；
2. 给父元素定义事件，监听子元素的冒泡事件；
3. 使用 event.target 来定位触发事件冒泡的子元素。

例:

        要为每个 li 标签绑定点击事件，首先需要找到 ul 标签，然后通过 ul 标签找到所有 li 标签， 最后在通过遍历所有 li 标签来绑定事件。若使用事件委托的话，就会简单很多，示例代码如下：

            <ul id="list">
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <li>555</li>
                <li>666</li>
            </ul>

            document.getElementById("list").onmouseover = function(event){
                var event = event || window.event; 
                var esrc = event.srcElement || event.target; 
                if(esrc.nodeName.toLowerCase = "li"){
                    esrc.style.color = "red";
                }
            }
            document.getElementById("list").onmouseout = function(event){
                var event = event || window.event; 
                var esrc = event.srcElement || event.target; 
                if(esrc.nodeName.toLowerCase = "li"){
                    esrc.style.color = "red";
                }
            }
            document.getElementById("btn2").onclick = function(){
                let temp = document.getElementById("list").lastElementChild.innerText;
                document.getElementById("list").innerHTML += "<li>"+(parseInt(temp) + 111)+"</li>"
            }