javascript:深入理解事件流

Null 發布于2019-08-21 10:38 / 1859人閱讀

摘要：所有節點中都包含這兩個方法，并且它們都接收個參數要處理的事件名作為事件處理程序的函數和一個布爾值。當這個布爾值為時，表示在捕獲階段調用事件處理程序若果是，表示在冒泡階段調用事件處理程序。

事件流

定義：
1.事件流描述的是從頁面中接收事件的順序,也可理解為事件在頁面中傳播的順序。
2.事件就是用戶或瀏覽器自身執行的某種動作。諸如click(點擊)、load(加載)、mouseover(鼠標懸停)。
3.事件處理程序響應某個事件的函數就叫事件處理程序(或事件偵聽器)。

下面所示例子注冊事件的方式均使用DOM2級事件定義的事件處理程序進行注冊，兼容性的問題不涉及。"DOM2級事件"定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節點中都包含這兩個方法，并且它們都接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。當這個布爾值為true時，表示在捕獲階段調用事件處理程序；若果是false，表示在冒泡階段調用事件處理程序。

事件的作用范圍討論

示例1

html

css

#wrap {
  width: 200px;
  height: 200px;
  background: orange;
}
#outer {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: #eeddff;
}
#inner {
  position: relative;
  top: 25px;
  left:25px;
  width: 50px;
  height: 50px;
  background: #44ddff;
}

var wrap = document.getElementById("wrap");
wrap.addEventListener("click",function(){
  alert("789");
},false);

output

問題1:容器元素wrap注冊了事件，那么此事件的作用范圍是什么？

思考1:根據上面例子，當點擊橘色塊中(包括被子元素覆蓋的部分)任何一部分時，都會彈出789，點擊橘色塊外面的部分并沒有任何反應，那么我們是不是就可以得出這這樣結論，元素注冊事件的作用范圍為元素自身在頁面中所占的空間大小，但是真的就是這樣嗎？下面我們做個試驗

試驗1:
css代碼修改如下,其他部分同上

#wrap {
  width: 200px;
  height: 200px;
  background: orange;
}
#outer {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: #eeddff;
}
/*inner中的top被修改*/
#inner {
  position: relative;
  top: 152px;
  left:25px;
  width: 50px;
  height: 50px;
  background: #44ddff;
}

output

結論1：當點擊橘色塊外淺藍色部分的時候,同樣的也彈出了789,而淺藍色部分是嵌套在wrap元素之內的元素,故可得出結論,當元素注冊了事件,此事件的作用范圍為:1.元素自己所占頁面空間部分加嵌套元素所占空間范圍(若嵌套元素覆蓋在容器元素上，則事件的作用范圍為容器元素自身所占空間大小)

事件的執行順序討論

問題2：根據上面的示例1，那么這里大家可以再思考一個問題，若容器元素wrap以及其嵌套元素outer，inner都注冊了click事件，根據試驗1得出的結論，那么嵌套在最里層的元素inner所占頁面的空間范圍內，一共有3個click事件都作用在其上，那么當在inner元素的作用范圍內點擊頁面時，3個事件的事件處理程序執行的順序又是如何的？

要解決上面我提出的問題2,這就涉及到了兩種處理事件流的不同的機制，事件冒泡和事件捕獲

事件冒泡

IE的事件流叫事件冒泡，即事件開始時由最具體的元素(文檔中嵌套層次最深的節點)接收，然后逐級向上傳播到較為不具體的節點。

示例2
將參數設為false，讓元素在冒泡階段調用事件處理程序

css,html代碼同示例1
js

var wrap = document.getElementById("wrap");
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

wrap.addEventListener("click",function(){
  alert("789");
},false);
outer.addEventListener("click",function(){
  alert("456");
},false);
inner.addEventListener("click",function(){
  alert("123");
},false);

結論2:在冒泡階段調用事件處理程序，上面問題的結果是這樣的：當點擊頁面中心淺藍色的部分時，先是彈出123，接著彈出456，最后彈出789。因此當容器元素及其嵌套元素都在冒泡階段調用事件處理程序時：事件按事件冒泡的順序執行事件處理程序。

事件捕獲

Netscape團隊提出的另一種事件流叫事件捕獲，事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。

示例3
將參數設為true，讓元素在捕獲階段調用事件處理程序

css,html代碼同示例1
js

var wrap = document.getElementById("wrap");
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
    
wrap.addEventListener("click",function(){
  alert("wrap");
},true);
outer.addEventListener("click",function(){
  alert("outer");
},true);
inner.addEventListener("click",function(){
  alert("inner");
},true);

結論3:在捕獲階段調用事件處理程序，上面問題的結果是這樣的：當點擊頁面中心淺藍色的部分時，先是彈出wrap，接著彈出outer，最后彈出inner。因此當容器元素及其嵌套元素都在捕獲階段調用事件處理程序時：事件按事件捕獲的順序執行事件處理程序。

問題3:根據思考1，思考2得出的結果，接著又有一個問題我認為需要思考，當同一個元素即在冒泡階段注冊了事件，又在捕獲階段注冊了同一事件，那么當事件被觸發時，事件的執行順序又會是如何的？

要解決上面我提出的問題3,這就涉及到了DOM事件流

DOM事件流

“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段==>處于目標階段==>事件冒泡階段。首先發生的是事件捕獲階段，為截獲事件提供了機會。然后是實際的目標接收事件。最后一個階段是冒泡階段，以下圖片來自w3c

示例4
css,html代碼同示例1
js

var wrap = document.getElementById("wrap");
var outet = document.getElementById("outer");
var inner = document.getElementById("inner");

wrap.addEventListener("click",function(){
  alert("789");
},false);
outer.addEventListener("click",function(){
  alert("456");
},false);
inner.addEventListener("click",function(){
  alert("123");
},false);
wrap.addEventListener("click",function(){
  alert("wrap");
},true);
outer.addEventListener("click",function(){
  alert("outer");
},true);
inner.addEventListener("click",function(){
  alert("inner");
},true);

結論4:當點擊頁面中心淺藍色部分的時候，先從最不具體的節點捕獲事件，先彈出wrap,接著彈出outer。接著處于目標階段，先彈出123，再彈出inner。緊接著，事件處于冒泡階段，先彈出456，再彈出789。因此我們可以得出結論，當容器元素及嵌套元素，即在捕獲階段又在冒泡階段調用事件處理程序時：事件按DOM事件流的順序執行事件處理程序，且當事件處于目標階段時，事件調用順序決定于綁定事件的書寫順序，按上面的例子為，先調用冒泡階段的事件處理程序，再調用捕獲階段的事件處理程序。具體demo可看評論，@ Levon

云服務器 GPU云服務器深入理解javascript javascript事件流深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85915.html

理解DOM事件流的三個階段

摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。本文主要解決兩個問題：什么是事件流 DOM事件流的三個階段起因在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...

xiangzhihong 2019-08-19 17:38 評論0 收藏0
理解DOM事件流的三個階段

摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。本文主要解決兩個問題：什么是事件流 DOM事件流的三個階段起因在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...

afishhhhh 2019-08-01 15:04 評論0 收藏0
JavaScript 工作原理之五－深入理解 WebSockets 和帶有 SSE 機制的HTTP/

摘要：幀協議讓我們深入了解下幀協議。目前可用的值該幀接續前面一幀的有效載荷。該幀包含二進制數據。幀有以下幾類長度表示有效載荷的長度。數據分片有效載荷數據可以被分成多個獨立的幀。接收端會緩沖這些幀直到位有值。原文請查閱這里，略有改動，本文采用知識共享署名 3.0 中國大陸許可協議共享，BY Troland。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工作原...

lijinke666 2019-08-22 17:08 評論0 收藏0
前端周報：前端面試題及答案總結；JavaScript參數傳遞的深入理解

摘要：前端面試題及答案總結掘金技術征文金三銀四，金九銀十，用來形容求職最好的幾個月。因為的存在，至少在被標準化的那一刻起，就支持異步編程了。然而異步編程真正發展壯大，的流行功不可沒。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面試題及答案總結 |掘金技術征文金三銀四，金九銀十，用來形容求職最好的幾個月...

ermaoL 2019-08-21 16:46 評論0 收藏0
深入理解js Dom事件機制（一）——事件流

摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。更新無需重新綁定事件處理器，因為事件代理對不同子元素可采用不同處理方法。首先我們思考一個很有意思的事情：一張紙上畫了兩個同心圓，當我們把手指放到圓心上時，手指指向的不是一個圓，而是紙上的兩個圓，同理之，當我們單擊網頁上的一個div...

OBKoro1 2019-08-21 17:34 評論0 收藏0