JavaScript學習筆記(2)DOM 事件流&&事件處理程序&&事件代理

定義:

  • 事件:用戶或瀏覽器自身執(zhí)行的某種動作。(click,load,mouseover)
  • 事件流:從頁面中接收事件的順序,也可理解為事件在頁面中傳播的順序。
  • 事件處理程序:響應(yīng)某個事件的函數(shù)。均以on開頭。(onclick,onmouseover等)

1.事件流

事件流分成兩種:事件冒泡和事件捕獲:

  • IE的事件流叫做事件冒泡,即事件開始時由最具體的元素接受,然后逐級向上傳播到較為不具體的節(jié)點。
  • 事件捕獲的思想恰恰相反:不太具體的節(jié)點應(yīng)該更早接收到事件,而最具體的節(jié)點應(yīng)該最后接收到事件。(在事件達到預(yù)定目標之前捕獲它)

DOM事件流

“DOM2級事件”規(guī)定的事件流包括三個階段:事件捕獲階段,處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲階段,為截獲事件提供了機會。然后是實際的目標接收事件。最后一個階段是冒泡階段,可以在這個階段對事件作出相應(yīng)。

圖片來源于網(wǎng)絡(luò)

以上圖為例,單擊div會按照圖上顯示的順序觸發(fā)事件。

瀏覽器支持

  • IE9,safari,chrome等目前均支持事件捕獲的事件流類型,這些瀏覽器都是從windows對象開始捕獲事件的。
  • 大多數(shù)情況下,都是將事件處理程序添加到事件流的冒泡階段,這樣可以最大限度地兼容瀏覽器。(IE8及更早版本不支持時間捕獲)如果不是特別需要,不建議在事件捕獲階段注冊事件處理程序。
  • IE9,Opera,Firefox,Chrome 和 Safari都支持DOM事件流,IE8及更早版本不支持DOM事件流。

例子

addEventListener

在寫例子之前,先簡單介紹一個方法:addEventListener

  • 該方法是‘DOM2級事件處理程序’的方法,它接受三個參數(shù):要處理的事件名,作為事件處理程序的函數(shù)和一個布爾值
    • 布爾值為false代表在冒泡階段調(diào)用事件處理程序,true代表在捕獲階段調(diào)用事件處理程序
  • 比如:btn.addEventListener("click",function(){alert("Hello world")},false) 就代表給按鈕btn注冊一個事件,當被點擊時瀏覽器會彈出消息“Hello World”,并且在冒泡階段調(diào)用click。
比較事件冒泡和事件捕獲

接下來就用addEventListener來展示事件冒泡和事件捕獲的區(qū)別:
先放上html 和 css 代碼:

<div id="level1">
    <div id="level2">
        <div id="level3"></div>
    </div>
</div>
#level1{
    background:red;
    height:200px;
    width:200px;
}
    
#level2{
    background:orange;
    height:100px;
    width:100px;
}
    
#level3{
    background:yellow;
    height:50px;
    width:50px;
}

呈現(xiàn)的效果很簡單,就是三個不同顏色的div塊:


事件流對比.png

然后用JS給每一個div注冊一個點擊事件,為了更加直觀,當每一個div的點擊事件被觸發(fā)時,會顯示一條該div塊背景顏色的消息,這樣我們就能清楚地看到各個div的click事件被觸發(fā)的先后順序

var level1=document.getElementById('level1');
var level2=document.getElementById('level2');
var level3=document.getElementById('level3');

level.addEventListener('click',function(){
    alert('yellow');
},false);

leve2.addEventListener('click',function(){
    alert('orange');
},false);

leve3.addEventListener('click',function(){
    alert('red');
},false);

根據(jù)上面的例子,addEventListener的布爾值參數(shù)被設(shè)置為false,所以會在冒泡階段調(diào)用事件處理程序。當點擊黃色方塊后,會先后彈出消息"yellow","orange","red";點擊橙色方塊后,會彈出消息"orange","red";點擊紅色方塊后,會彈出"red".這個結(jié)果也印證了我們之前所說的事件冒泡會使事件開始時由最具體的元素接受,然后逐級向上傳播到較為不具體的節(jié)點。這里的黃色方塊是嵌套在最里面的div塊,所以是該例子中最具體的節(jié)點,紅色塊是最外層的div快,在該例中是最不具體的節(jié)點。

接著我們再測試一下用事件捕獲的思想會獲得什么結(jié)果:
html和css代碼都不需要變動,只需要對JS代碼稍作修改:把布爾值從false改成true.

var level1=document.getElementById('level1');
var level2=document.getElementById('level2');
var level3=document.getElementById('level3');

level.addEventListener('click',function(){
    alert('yellow');
},true);

leve2.addEventListener('click',function(){
    alert('orange');
},true);

leve3.addEventListener('click',function(){
    alert('red');
},true);

結(jié)果還是和我們預(yù)想的一樣,當點擊黃色方塊后,會先后彈出消息"red","orange","yellow";當點擊橙色方塊后,會先后彈出消息"red","orange";點擊紅色方塊時仍然只有"red".結(jié)果和上例恰好相反。

從上述兩個例子,我們可以清晰地看出事件冒泡和事件捕獲兩種事件流的區(qū)別。

事件處理程序

4種為事件指定處理程序的方式:
  • HTML 事件處理程序:
    <input type="button" value="click" onclick="showMsg()"/>
    function showMsg(){
        alert("hello world");
    }
  • DOM0級事件處理程序:
    btn.onclick=function(){
        alert("hello world");
    };
  • DOM2級事件處理程序:
    btn.addEventListener("click",function(){},false); //事件冒泡
    btn.addEventListener("click",function(){},true); //事件捕獲
  • IE事件處理程序
    • 通過attachEvent()添加的事件處理程序會被添加到冒泡階段。
    • 使用attachEvent()方法的情況下,事件處理程序會在全局作用域中運行,因此this等于window。
    btn.attachEvent("onclick",function(){
        alert("hello world");
    });

事件代理(event delegation)

定義

事件代理允許我們需要為很多元素添加事件的時候,可以將事件添加到它們的父節(jié)點而將事件委托給父節(jié)點來觸發(fā)處理函數(shù),這得益于事件冒泡機制。

舉例

html 代碼如下:

<ul id="parent">
  <li id="child1">item1</li>
  <li id="child2">item2</li>
  <li id="child3">item3</li>
  <li id="child4">item4</li>
  <li id="child5">item5</li>
</ul>

Javascript代碼如下:

var parent=document.getElementById("parent");
parent.addEventListener("click",function(event){
    if(event.target&&event.target.nodeName=="LI"){
    alert("list item "+event.target.id+" was clicked");
  }
});

這里我們假設(shè)需要為每一個Li節(jié)點添加一個點擊事件,如果依次添加,尤其是如果你需要在程序內(nèi)不同的地方添加和刪除點擊事件,那么就會非常麻煩。其中一個解決方法便是將點擊事件添加到LI節(jié)點的父元素UL節(jié)點上,如上述代碼所示,當事件冒泡到父節(jié)點以后,通過target屬性可以得知哪一個LI節(jié)點被點擊了,從而進行相應(yīng)的處理。此例只是將獲取的LI元素的ID顯示出來了。

jQuery中的delegate()

delegate()方法為指定的元素(被選元素的子元素)添加一個或多個事件處理程序,并規(guī)定當這些事件發(fā)生時運行的函數(shù),該方法有四個參數(shù),分別是選擇器,事件類型,傳遞到函數(shù)的數(shù)據(jù),函數(shù),傳遞到函數(shù)的數(shù)據(jù)可以選填。

舉例

還是上面那個例子,html代碼不變,jQuery代碼如下:

    $("#parent").delegate("li","click",function(){
        $(this).after("clicked");
    })

為什么要用事件代理?

事件代理只需要在父元素綁定一次所需事件,而不需要在子元素上綁定多次,從而大大提升了性能,也提升了編碼效率。

參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 以下文章為轉(zhuǎn)載,對理解JavaScript中的事件處理機制很有幫助,淺顯易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy閱讀 3,075評論 1 10
  • 一、問答 1. dom對象的innerText和innerHTML有什么區(qū)別? innerHTML: 也就是從對象...
    饑人谷_羅偉恩閱讀 647評論 0 2
  • 一、dom對象的innerText和innerHTML有什么區(qū)別? innerHTML返回的是從對象起始位置到終止...
    __Qiao閱讀 428評論 0 0
  • 保安隊才建立起來兩個月,就有一宗大案子在縣屬境內(nèi)發(fā)生了。 時已深冬,天氣寒冷干燥,山也退了顏色,一派枯黃,縣衙大堂...
    ARMSTRONG萌閱讀 422評論 0 0
  • 陽光是否不會遺漏任何一個角落,是否每個努力拼搏的青春總會有逆襲……?!
    悅圖文閱讀 179評論 0 1