事件捕获，事件冒泡，事件委托

事件捕获

　　事件从document往下一直触发到目标元素：

　　
<div id="parent">
    <div id="child"></div>
</div>

document.getElementById('parent').addEventListener('click', function (ev) {
     this.style.background = 'red';
     alert(this.id);
}, true);
document.getElementById('child').addEventListener('click', function (ev) {
    this.style.background = 'yellow';
    alert(this.id);
}, true);

先弹出parent，再弹出child。

事件冒泡

　　事件从目标元素往上一直触发到document：

document.getElementById('parent').addEventListener('click', function (ev) {
     this.style.background = 'red';
     alert(this.id);
}, false);
document.getElementById('child').addEventListener('click', function (ev) {
    this.style.background = 'yellow';
    alert(this.id);
}, false);

先弹出child，再弹出parent。

1.如何阻止事件冒泡：

非IE：stopPropagation()

IE：cancelBubble = true

 //阻止冒泡
if(ev.stopPropagation){
   ev.stopPropagation();
}else{
  ev.cancelBubble=true;//IE
}           

事件委托

　　利用事件冒泡将目标元素的事件传给其父元素，这样动态创建的子元素也可以拥有和其他子元素相同的事件。

            let oUl = document.getElementById('ul');
            let aLi = oUl.getElementsByTagName('li');

            /*鼠标移入改变当前li颜色*/
            //传统方法：
            /*   for(i=0;i<aLi.length;i++){
                   aLi[i].onmouseover= function(){
                       this.style.background = '#F54000';
                   }
                   aLi[i].onmouseout= function(){
                       this.style.background = '#ccc';
                   }
               }*/

            //事件委托方法：
            oUl.addEventListener('mouseover', function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;

                if (target.nodeName.toLowerCase() == 'li') {
                    target.style.background = '#F54000';
                }
            });
            oUl.addEventListener('mouseout', function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;

                if (target.nodeName.toLowerCase() == 'li') {
                    target.style.background = '#ccc';
                }
            });
            
            //传统方法无法为动态添加的元素绑定同样的事件，可用事件委托的方式实现
            let oLi = document.createElement('li');
            oUl.appendChild(oLi);