說說JavaScript中的事件模型

林恒發表於2024-05-17
JavaScript事件模型

一、事件與事件流

javascript中的事件，可以理解就是在HTML文件或者瀏覽器中發生的一種互動操作，使得網頁具備互動性， 常見的有載入事件、滑鼠事件、自定義事件等

由於DOM是一個樹結構，如果在父子節點繫結事件時候，當觸發子節點的時候，就存在一個順序問題，這就涉及到了事件流的概念

事件流都會經歷三個階段：

  • 事件捕獲階段(capture phase)
  • 處於目標階段(target phase)
  • 事件冒泡階段(bubbling phase)

事件冒泡是一種從下往上的傳播方式，由最具體的元素（觸發節點）然後逐漸向上傳播到最不具體的那個節點，也就是DOM中最高層的父節點

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Event Bubbling</title>
    </head>
    <body>
        <button id="clickMe">Click Me</button>
    </body>
</html>

然後，我們給button和它的父元素，加入點選事件

var button = document.getElementById('clickMe');

button.onclick = function() {
  console.log('1.Button');
};
document.body.onclick = function() {
  console.log('2.body');
};
document.onclick = function() {
  console.log('3.document');
};
window.onclick = function() {
  console.log('4.window');
};

點選按鈕，輸出如下

1.button
2.body
3.document
4.window

點選事件首先在button元素上發生，然後逐級向上傳播

事件捕獲與事件冒泡相反，事件最開始由不太具體的節點最早接受事件, 而最具體的節點（觸發節點）最後接受事件

二、事件模型

事件模型可以分為三種：

  • 原始事件模型（DOM0級）
  • 標準事件模型（DOM2級）
  • IE事件模型（基本不用）

原始事件模型

事件繫結監聽函式比較簡單, 有兩種方式：

  • HTML程式碼中直接繫結
<input type="button" onclick="fun()">
  • 透過JS程式碼繫結
var btn = document.getElementById('.btn');
btn.onclick = fun;

特性

  • 繫結速度快

DOM0級事件具有很好的跨瀏覽器優勢，會以最快的速度繫結，但由於繫結速度太快，可能頁面還未完全載入出來，以至於事件可能無法正常執行

  • 只支援冒泡，不支援捕獲

  • 同一個型別的事件只能繫結一次

<input type="button" id="btn" onclick="fun1()">

var btn = document.getElementById('.btn');
btn.onclick = fun2;

如上，當希望為同一個元素繫結多個同型別事件的時候（上面的這個btn元素繫結2個點選事件），是不被允許的，後繫結的事件會覆蓋之前的事件

刪除 DOM0 級事件處理程式只要將對應事件屬性置為null即可

btn.onclick = null;

標準事件模型

在該事件模型中，一次事件共有三個過程:

  • 事件捕獲階段：事件從document一直向下傳播到目標元素, 依次檢查經過的節點是否繫結了事件監聽函式，如果有則執行
  • 事件處理階段：事件到達目標元素, 觸發目標元素的監聽函式
  • 事件冒泡階段：事件從目標元素冒泡到document, 依次檢查經過的節點是否繫結了事件監聽函式，如果有則執行

事件繫結監聽函式的方式如下:

addEventListener(eventType, handler, useCapture)

事件移除監聽函式的方式如下:

removeEventListener(eventType, handler, useCapture)

引數如下：

  • eventType指定事件型別(不要加on)
  • handler是事件處理函式
  • useCapture是一個boolean用於指定是否在捕獲階段進行處理，一般設定為false與IE瀏覽器保持一致

舉個例子：

var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);

特性

  • 可以在一個DOM元素上繫結多個事件處理器，各自並不會衝突
btn.addEventListener(‘click’, showMessage1, false);
btn.addEventListener(‘click’, showMessage2, false);
btn.addEventListener(‘click’, showMessage3, false);
  • 執行時機

當第三個引數(useCapture)設定為true就在捕獲過程中執行，反之在冒泡過程中執行處理函式

下面舉個例子：

<div id='div'>
    <p id='p'>
        <span id='span'>Click Me!</span>
    </p >
</div>

設定點選事件

var div = document.getElementById('div');
var p = document.getElementById('p');

function onClickFn (event) {
    var tagName = event.currentTarget.tagName;
    var phase = event.eventPhase;
    console.log(tagName, phase);
}

div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);

上述使用了eventPhase，返回一個代表當前執行階段的整數值。1為捕獲階段、2為事件物件觸發階段、3為冒泡階段

點選Click Me!，輸出如下

P 3
DIV 3

可以看到，p和div都是在冒泡階段響應了事件，由於冒泡的特性，裹在裡層的p率先做出響應

如果把第三個引數都改為true

div.addEventListener('click', onClickFn, true);
p.addEventListener('click', onClickFn, true);

輸出如下

DIV 1
P 1

兩者都是在捕獲階段響應事件，所以div比p標籤先做出響應

IE事件模型

IE事件模型共有兩個過程:

  • 事件處理階段：事件到達目標元素, 觸發目標元素的監聽函式。
  • 事件冒泡階段：事件從目標元素冒泡到document, 依次檢查經過的節點是否繫結了事件監聽函式，如果有則執行

事件繫結監聽函式的方式如下:

attachEvent(eventType, handler)

事件移除監聽函式的方式如下:

detachEvent(eventType, handler)

舉個例子：

var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);

　　

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

說說JavaScript中的事件模型

相關文章