事件委托

就是利用事件传播的机制, 把自己的事件委托给别人来做

• 把子元素本身需要绑定的事件, 直接绑定给共同的父元素
• 在父元素的事件里面通过事件目标来判断你点击的是谁

事件委托相比于循环绑定事件的优点

1. 对于 DOM 操作的减少

2. 动态添加的元素不需要单独添加事件

3. 整套的替换元素, 不影响操作, 是要把事件委托委托给一个在页面上不动的父元素

var ul = document.querySelector('.box')

ul.onclick = function (e) {

    e = e||window.event

    var target = e.target||e.srcElement

    // console.log(target)

    if(target.nodeName==='LI'){

        console.log(target)

    }

}

先进行获取元素，然后对元素设置点击事件，函数中的e是函数的形参表示事件对象(在事件本次触发的时候, 对本次事件的描述信息)，需要用到事件对象里面数据的时候，就要接受e形参，需要对e进行兼容处理。

为了确定是那个li点击的，添加事件目标，并设置兼容性，最后通过if进行判断目标