JavaScript 事件冒泡 事件捕獲 取消事件冒泡 取消默認事件

//事件冒泡:結構上存在(非視覺上)嵌套關係的元素,會存在冒泡的功能,即同一事件,自子元素冒泡向父元素,自底向上.
//即若是一個點擊事件發生在子元素上,它會一級級向父元素冒泡.
//注意:是結構上從子元素冒向父元素.
//例如:  若是div1 div2 div3都綁定了點擊事件,點擊div3, div3 div2 div1 的點擊事件都會觸發,觸發順序是3到1,從結構的底層向上冒泡.(其中div1和div2是事件冒泡,div3是事件執行,由於點的就是它).

1   <div>div1
2       <div>div2
3           <div>div3</div>
4        </div>
5   </div>

//事件捕獲:結構上存在(非視覺上)存在嵌套關係的元素,會存在捕獲的功能,即同一事件,自父元素捕獲向子元素(事件源元素),自上向下.
//例如:若是div1 div2 div3都綁定了點擊事件,點擊div3, div1 div2 div3 的點擊事件都會觸發,觸發順序是1到3(其中div1和div2是事件捕獲,div3是事件執行,由於點的就是div3).

//IE上沒有事件捕獲

//同一個對象的同一個事件類型,綁定了兩個事件處理函數,一個遵循冒泡,一個遵循捕獲,那麼先捕獲,後冒泡.

//focus blur change submit reset select 等事件不冒泡

 

//事件是天生就有的,一個元素不綁定事件,它也會向上冒泡,只是它本身沒有事件處理程序須要執行,若是父級有綁定事件處理函數,會觸發父級的綁定從而執行對應的函數.
//例如:假設div1綁定了點擊事件,div2沒有綁定事件,可是點擊div2,依然會冒泡到div1,即div1的點擊事件會被觸發執行.

//取消冒泡
//W3C標準: event.stopPropagation() ---->此方法不支持IE9如下版本
//IE獨有: event.cancleBubble = true

//寫法
elem.onclick = function (e){
//e.stopPropagation() //取消冒泡
e.cancleBubble = true
}


//封裝取消冒泡的函數

    function stopBubble(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else if(event.cancleBubble){
            event.cancleBubble = true;
        }
    }

//取消默認事件
//方法1 return false

//封裝取消默認事件函

    function cancelHandler(e){
        if(e.preventDefault){
            e.preventDefault();  //方法2 W3C   IE9如下不兼容
        }else{
            e.returnValue = false;  //方法3  兼容IE
        }
    }