事件委托

将自己的事件委托给别人去做 - 事件委托

<script type="text/javascript">
// 委托给了父亲
var lis = document.querySelectorAll("li");
// 点击btn添加一个li
var ul = document.querySelector("ul");
var btn = document.querySelector("#btn");
btn.onclick=function(){
    var li = document.createElement("li");
    var length = lis.length;
    length++;
    li.innerText = length;
    ul.appendChild(li);
}
// 新创建的元素没有单击事件

// 事件委托 - 子元素的事件交给父元素去处理
ul.onclick=function(e){
    // 在父元素的事件中，通过事件对象判断，判断是否准确点击到了子元素，再处理子元素点击的事情
    // 事件对象.target 精准的事件源
    var e = e || window.event;
    // 兼容写法
    var target = e.target || e.srcElement;
    if(target.nodeName == "B"){
        console.log(e.target.innerText);
    }
}
</script>

事件冒泡的原理：点击子元素其实父元素的事件会在冒泡阶段执行

事件委托的好处：
提高性能，因为给子元素事件要绑定多次，事件委托，只需要绑定一次
动态添加的子元素也会具有事件