JavaScript事件詳解

一   事件流

事件，是文檔或者瀏覽器窗口中發生的一些特定的交互瞬間，事件流描述的是頁面中接受事件的順序。

目前事件流一般指的是DOM2事件流，它規定了觸發一個事件須要經歷三個階段：

事件捕獲階段  ----->  處於目標階段  ----->  事件冒泡階段

事件冒泡

事件冒泡最初是由IE團隊提出來的，即事件開始時由目標元素接受，而後逐級向上傳播直至頂部，在此期間父級同類事件將被觸發。

<script type="text/javascript">
        var div=document.getElementById("myDiv");
        div.onclick=function(event){
            alert("div");
        };
        document.body.onclick=function(event){
            alert("body");
        };    
</script>

//  div  --->   body複製代碼

兼容：IE，chrome，Firefox，Opera，Safari都支持事件冒泡，並將事件冒泡到window對象。

事件捕獲

事件捕獲與事件冒泡相反，即事件開始時從根元素觸發，而後逐級向下傳播直至目標元素，在此期間同類事件將被觸發。

<script type="text/javascript">
        var div=document.getElementById("myDiv");    
        div.addEventListener("click",function(event){
            alert("div");
        },true);
        document.body.addEventListener("click",function(event){
            alert("body");
        },true);
        
</script>
//  body  --->   div複製代碼

兼容：IE，chrome，Firefox，Opera，Safari都支持事件冒泡，並將事件冒泡到window對象,IE8及如下只支持事件冒泡。

二  事件處理程序（添加事件方式）

HTML事件處理

經過將事件做爲html屬性來處理。

//1
<input type="button" value="confirm" onclick="alert('confirm')" />//2
<script type="text/javascript">
        function showMessage() {
            alert("confirm");
        }
</script>
<input type="button" value="confirm" onclick="showMessage()"/>
複製代碼

 DOM0級事件(直接添加)

經過Javascript指定事件處理程序的傳統方式，全部瀏覽器均支持。每一個元素（包括window，document）都有本身的事件處理程序屬性，可是必須在DOM節點加載完以後纔會有效。

<script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.onclick = function(event) {
            alert("div");
        };
</script>複製代碼

DOM2級事件（事件監聽）

IE9，chrome，Firefox，Opera，Safari均實現了DOM2級事件處理程序，監聽目標元素的事件。

addEventListener(element,fn,boolean)：接收三個參數：事件名稱，事件處理函數和一個布爾值。布爾值爲true，則表示在捕獲階段調用事件處理程序；若是爲false，則表示在冒泡階段調用事件處理程序,默認爲false。

removeEventListener(element,fn,boolean) : 移出事件

IE事件： attachEvent(element,fn) , deleteEvent(element,fn)

封裝通用事件監聽函數

<input type="button" value="click me" id="btn5"> 
//綁定監聽事件
function addEventHandler(target,type,fn){ 
    if(target.addEventListener){ 
        target.addEventListener(type,fn); 
    }else{ 
        target.attachEvent("on"+type,fn); 
    }
} 
//移除監聽事件
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn); 
    }else{ 
        target.detachEvent("on"+type,fn); 
    }
}複製代碼

事件委託

事件委託就是利用冒泡的原理，把事件加到父元素或祖先元素上，觸發執行效果。

<input type="button" value="click me" id="btn">

var btn = document.getElementById("btn");
document.onclick = function(event){ 
    event = event || window.event; var target = event.target || event.srcElement; 
    if(target.tagName === 'INPUT'){
         alert(b"我是input"); 
    }
}複製代碼

優勢：

1.提升了JavaScript的性能，時間委託顯著地提升了時間的處理速度，減小了內存佔用率。

2.動態的添加DOM元素時，不須要由於元素的修改而修改綁定事件，只需給上級元素添加/監聽事件便可。

三  阻止事件冒泡和瀏覽器默認行爲

1.event.stopProgation(): 阻止了事件冒泡，但不會阻擊瀏覽器默認行爲

2.event.preventDefault(): 阻止了瀏覽器默認行爲，但不會阻止事件冒泡

3.return false: 即阻止了事件冒泡，也阻止了事件冒泡