事件冒泡应用——事件委托

给每个列表都能触发一个事件

可以循环遍历添加给每个li都添加事件。但是这样很低效。
可以给li的父元素添加事件，点击没有li都能够触发这个函数。点击li子元素会触发父元素（事件冒泡）。基于事件冒泡的原理li将事件委托到ul

• html代码

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>

• JavaScript代码

document.getElementsByTagName('ul')[0].onclick = function (e) {
    // this指向了父元素，因为父元素就是事件源
    var lis = this.children;
    for(var i=0;i<lis.length;i++){//这里的循环只是为了使得其他的兄弟元素样式不一样。
        if(lis[i] == e.target){
            e.target.style.backgroundColor = 'red';
        }else{
            lis[i].style.backgroundColor = '#fff';
        }
    }

    //e 就是事件参数（事件对象），当事发生的时候，可以获取一些和事件相关的数据
    // 获取到当前点击的li ==> e.target
    // e.target.style.backgroundColor = 'red';
    var li = e.target;
    console.log(li);
}
// onclick这个方法是紫铜调用的，当系统调用的时候，系统会传递这个参数

event对象 事件的状态
event.target 触发事件的元素，当前触发的对象
event.currentTarget 绑定事件的元素，全部都改变
this 事件源

这个之前有学过，昨天面试官问的时候却没答出来。写写记录，加深下印象。