事件捕獲，事件冒泡，事件委託

事件捕獲

　　事件從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);