JavaScript事件詳解

rosenWang發表於2018-12-20
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: 即阻止了事件冒泡，也阻止了事件冒泡


相關文章