js事件流機制冒泡和捕獲

阿新 • • 發佈：2019-01-18

JavaScript與HTML之間的互動是通過事件實現的。事件，就是文件或瀏覽器視窗中發生的一些特定的互動瞬間。

事件流

從頁面中接收事件的順序稱為事件流。

IE --> 事件冒泡流

Netscape --> 事件捕獲流

事件冒泡

IE的事件流叫做事件冒泡(event bubbling)，即事件開始時由最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級向上傳播到較為不具體的節點（文件）。

我們先來個簡單的例子，這是HTML結構


<!DOCTYPE html>

<html lang="en">

<head>

  <title>js事件流</title>

</head>

<body>

  <div id="div">

    我是div

  </div>

</body>

</html>

有一個div元素。如果我們點選<div>元素，那麼這個click事件的順序會怎麼呢？

我們給幾個元素都新增監聽事件,

element.addEventListener(event, function, useCapture)
引數說明:

event 字串。指定事件名，比如 click、mouseenter、mouseleave

function 函式。指定要事件觸發時執行的函式。

useCapture 布林值。指定事件是否在捕獲或冒泡階段執行。預設值是false，即事件在冒泡階段執行。true，在捕獲階段執行


var div = document.getElementById('div')

var body = document.body

var html = document.documentElement

div.addEventListener('click', function () {

  console.log('div標籤')

}, false)

body.addEventListener('click', function () {

  console.log('body ')

},  false)

html.addEventListener('click', function () {

  console.log('html')

},  false)

document.addEventListener('click', function () {

  console.log('document')

}, false)

然後點選<div>元素，檢視控制檯輸出，
事件冒泡流

由上面的輸出結果可以看出，這個click事件會按照如下順序傳播：
<div> ---> <body>---> <html> --->document

也就是說，click事件首先發生在目標元素，然後，click事件沿著DOM樹向上傳播到document物件。這就是事件冒泡。

所有現代瀏覽器都支援事件冒泡。IE9、Firefox、Chrome和Safari則將事件一直冒泡到window物件。

如果，我們在每個DOM元素上都設定監聽事件，會得到的事件的傳播順序是：
<div>

---><body> ---> <html> --->document ---> window

事件捕獲

Netscape Communicator團隊提出的另一種事件流叫做事件捕獲（event capturing）。事件捕獲是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預期目標之前捕獲它。

我們還是可以看剛才的例子，DOM結構不變，我們修改下監聽事件


var div = document.getElementById('div')

var body = document.body

var html = document.documentElement

div.addEventListener('click', function () {

  console.log('div標籤')

}, true)

body.addEventListener('click', function () {

  console.log('body ')

},  true)

html.addEventListener('click', function () {

  console.log('html')

},  true)

document.addEventListener('click', function () {

  console.log('document')

}, true)

之後，還是點選<div>元素，得到的結果
事件捕獲流

從上面例子可以看出，事件走向: document ---><html> ---> <body> ---><div>

也就是說，在事件捕獲過程中，document物件首先接收到click事件，然後事件沿著DOM樹依次向下，一直傳播到事件的實際目標，即<div>元素。這就是事件捕獲。與事件冒泡過程，截然相反。

儘管“DOM2級事件”規範要求事件應該從document物件開始傳播，但是現代瀏覽器大部分都是從window物件開始捕獲事件的。
如果，我們在每個DOM元素上都設定監聽事件，會得到的事件的傳播順序是：
window ---> document ---><html> ---> <body> ---><div>

由於在老版本的瀏覽器中不支援，因此事件捕獲用的人比較少，除非在特殊需要的時候才使用。

DOM事件流

“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。

首先發生的是事件捕獲，為截獲事件提供了機會。然後是實際的目標接收到事件。最後一個階段是冒泡階段，可以在這個階段對事件作出響應。

DOM2級事件流

事件捕獲階段：在DOM事件流中，實際的目標（<div>元素）在捕獲階段不會接收到事件。這意味著在捕獲階段，事件從document到<html>再到<body>後就停止了。
處於目標階段：事件在<div>上發生，並在事件處理中被看成冒泡階段的一部分。
事件冒泡階段：冒泡階段發生，事件又傳播迴文檔。

雖然，“DOM2級事件”規範明確要求捕獲階段不會涉及事件目標，但是IE9及以上的現代瀏覽器都會在捕獲階段觸發事件目標物件上的事件。結果，就是有兩個機會在目標物件上面操作事件,也就是說上圖中的步驟4，既可以在捕獲階段發生，也可以在冒泡階段發生。

IE8級更早版本不支援DOM事件流，現代瀏覽器都支援DOM事件流。

事件流的應用

事件流比較典型應用是事件委託。事件委託利用了事件冒泡，只指定一個事件處理程式，就可以管理一型別的所有事件。

我們檢視一個常用例子，這是一個無序列表的DOM結構：


  <ul>

    <li id="li1">我是第1個li</li>

    <li id="li2">我是第2個li</li>

    <li id="li3">我是第3個li</li>

  </ul>

我們的需求是，點選不同列，輸出不同的訊息。

第一種做法：給每個<li>新增點選事件，這樣能分別處理事件，展示不同的內容。


document.getElementById('li1').addEventListener('click', function(e) {

    console.log('我是第一個li')

}, false)

document.getElementById('li2').addEventListener('click', function(e) {

    console.log('我是第2個li')

}, false)

document.getElementById('li3').addEventListener('click', function(e) {

    console.log('我是第3個li')

}, false)

單擊每一個<li>，會輸出對應的內容。

第二種做法：給<li>元素的父元素<ul>新增一個處理事件，


document.querySelector('ul').addEventListener('click', function (e) {

  console.log(e.target.innerText)

}, false)

單擊每一個<li>，會展示不同的<li>中文字元素內容。

在這段程式碼中，我們只為<ul>元素添加了一個onclick事件處理程式。由於所有<li>都是<ul>元素的子節點，而且它們的事件會冒泡，所以單擊事件最終會被這個函式處理。

以上兩種方式，第二種所具有的優勢：

事前消耗更低。因為只取得了一個DOM元素，只添加了一個事件處理程式。
佔用的記憶體更少。每個函式都是物件，都會佔用記憶體。
效能更優。記憶體中的物件越多，效能就越差。
如果以後要增減<li>元素，也不用修改事件方法，可以獲取相同的處理結果。

所以，比較推薦使用第二種方式。

最適合採用事件委託技術的事件包括click、mousedown、mouseup、keydown、keyup和keypress。雖然mouseover和mouseout事件也冒泡，但要適當處理它們並不容易，而且經常要計算元素的位置。

參考資料:

JavaScript高階程式設計（第三版）- 第13章事件

js事件流機制冒泡和捕獲

事件流

事件冒泡

事件捕獲

DOM事件流

事件流的應用

js事件流機制冒泡和捕獲

JS事件流（事件冒泡和事件捕獲）

js 事件流的事件冒泡和事件捕獲與阻止事件傳播

js事件流事件捕獲及時間冒泡詳解

11.JS-事件流-冒泡、捕獲

事件流（事件冒泡和捕獲，函式閉包等）

js 事件流，事件冒泡機制

js基礎之冒泡和捕獲機制

js事件流之事件冒泡的應用----事件委託

js事件流之事件冒泡的應用----事件委托

JS事件流和事件委託

JS事件之事件流機制

事件冒泡和捕獲觸發

js事件流

一次關於js事件出發機制反常的解決記錄

js 事件流

關於JS事件迴圈機制

setTimeOut引發的思考——初步理解JS事件迴圈機制 Event Loop

JS事件迴圈機制（event loop）

addEventListener 冒泡和捕獲

js事件流機制冒泡和捕獲

事件流

事件冒泡

事件捕獲

DOM事件流

事件流的應用

相關推薦