2. 程式人生 > >DOM事件機制

DOM事件機制

阿新 • • 發佈：2018-12-05

前言

本文主要介紹DOM事件級別、DOM事件模型、事件流、事件代理和Event物件常見的應用，希望對你們有些幫助和啟發！

本文首發地址為GitHub部落格,寫文章不易，請多多支援與關注！

一、DOM事件級別

DOM級別一共可以分為四個級別：DOM0級、DOM1級、DOM2級和DOM3級。而DOM事件分為3個級別：DOM 0級事件處理，DOM 2級事件處理和DOM 3級事件處理。由於DOM 1級中沒有事件的相關內容，所以沒有DOM 1級事件。

1.DOM 0級事件

el.onclick=function(){}

// 例1
var btn = document.getElementById('btn'
 
);
 btn.onclick = function(){
     alert(this.innerHTML);
 }
複製程式碼

當希望為同一個元素/標籤繫結多個同類型事件的時候（如給上面的這個btn元素繫結3個點選事件），是不被允許的。DOM0事件繫結，給元素的事件行為繫結方法，這些方法都是在當前元素事件行為的冒泡階段(或者目標階段)執行的。

2.DOM 2級事件

el.addEventListener(event-name, callback, useCapture)

  • event-name: 事件名稱，可以是標準的DOM事件
  • callback: 回撥函式，當事件觸發時，函式會被注入一個引數為當前的事件物件 event
  • useCapture: 是否以捕獲的方式觸發，預設為true
// 例2
var btn = document.getElementById('btn');
btn.addEventListener("click", test, false);
function test(e){
	e = e || window.event;
    alert((e.target || e.srcElement).innerHTML);
    btn.removeEventListener("click", test)
}
//IE9-:attachEvent()與detachEvent()。
//IE9+/chrom/FF:addEventListener()和removeEventListener()
複製程式碼

IE9以下的IE瀏覽器不支援 addEventListener()和removeEventListener()，使用 attachEvent()與detachEvent() 代替，因為IE9以下是不支援事件捕獲的，所以也沒有第三個引數，第一個事件名稱前要加on。

3.DOM 3級事件

在DOM 2級事件的基礎上添加了更多的事件型別。

  • UI事件，當用戶與頁面上的元素互動時觸發，如：load、scroll
  • 焦點事件，當元素獲得或失去焦點時觸發，如：blur、focus
  • 滑鼠事件，當用戶通過滑鼠在頁面執行操作時觸發如：dblclick、mouseup
  • 滾輪事件，當使用滑鼠滾輪或類似裝置時觸發，如：mousewheel
  • 文字事件，當在文件中輸入文字時觸發，如：textInput
  • 鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發，如：keydown、keypress
  • 合成事件，當為IME（輸入法編輯器）輸入字元時觸發，如：compositionstart
  • 變動事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified
  • 同時DOM3級事件也允許使用者自定義一些事件。

二、DOM事件模型和事件流

DOM事件模型分為捕獲和冒泡。一個事件發生後，會在子元素和父元素之間傳播（propagation）。這種傳播分成三個階段。

（1）捕獲階段：事件從window物件自上而下向目標節點傳播的階段；

（2）目標階段：真正的目標節點正在處理事件的階段；

（3）冒泡階段：事件從目標節點自下而上向window物件傳播的階段。

DOM事件捕獲的具體流程

捕獲是從上到下，事件先從window物件，然後再到document（物件），然後是html標籤（通過document.documentElement獲取html標籤），然後是body標籤（通過document.body獲取body標籤），然後按照普通的html結構一層一層往下傳，最後到達目標元素。

而事件冒泡的流程剛好是事件捕獲的逆過程。 接下來我們看個事件冒泡的例子：

// 例3
<div id="outer">
    <div id="inner"></div>
</div>
......
window.onclick = function() {
    console.log('window');
};
document.onclick = function() {
    console.log('document');
};
document.documentElement.onclick = function() {
    console.log('html');
};
document.body.onclick = function() {
    console.log('body');
}
outer.onclick = function(ev) {
    console.log('outer');
};
inner.onclick = function(ev) {
    console.log('inner');
};
複製程式碼

正如我們上面提到的onclick給元素的事件行為繫結方法都是在當前元素事件行為的冒泡階段(或者目標階段)執行的。

三、事件代理(事件委託)

由於事件會在冒泡階段向上傳播到父節點，因此可以把子節點的監聽函式定義在父節點上，由父節點的監聽函式統一處理多個子元素的事件。這種方法叫做事件的代理（delegation）。

1.優點

  • 減少記憶體消耗，提高效能

假設有一個列表，列表之中有大量的列表項，我們需要在點選每個列表項的時候響應一個事件

// 例4
<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
複製程式碼

如果給每個列表項一一都繫結一個函式，那對於記憶體消耗是非常大的，效率上需要消耗很多效能。藉助事件代理，我們只需要給父容器ul繫結方法即可，這樣不管點選的是哪一個後代元素，都會根據冒泡傳播的傳遞機制，把容器的click行為觸發，然後把對應的方法執行，根據事件源，我們可以知道點選的是誰，從而完成不同的事。

  • 動態繫結事件

在很多時候，我們需要通過使用者操作動態的增刪列表項元素，如果一開始給每個子元素繫結事件，那麼在列表發生變化時，就需要重新給新增的元素繫結事件，給即將刪去的元素解綁事件，如果用事件代理就會省去很多這樣麻煩。

2.如何實現

接下來我們來實現上例中父層元素 #list 下的 li 元素的事件委託到它的父層元素上：

// 給父層元素繫結事件
document.getElementById('list').addEventListener('click', function (e) {
  // 相容性處理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判斷是否匹配目標元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML);
  }
});
複製程式碼

四、Event物件常見的應用

  • event. preventDefault()

如果呼叫這個方法，預設事件行為將不再觸發。什麼是預設事件呢？例如表單一點選提交按鈕(submit)跳轉頁面、a標籤預設頁面跳轉或是瞄點定位等。

很多時候我們使用a標籤僅僅是想當做一個普通的按鈕，點選實現一個功能，不想頁面跳轉，也不想瞄點定位。

//方法一：
<a href="javascript:;">連結</a>
複製程式碼

也可以通過JS方法來阻止，給其click事件繫結方法，當我們點選A標籤的時候，先觸發click事件，其次才會執行自己的預設行為

//方法二:
<a id="test" href="http://www.cnblogs.com">連結</a>
<script>
test.onclick = function(e){
    e = e || window.event;
    return false;
}
</script>
複製程式碼
//方法三：
<a id="test" href="http://www.cnblogs.com">連結</a>
<script>
test.onclick = function(e){
    e = e || window.event;
    e.preventDefault();
}
</script>
複製程式碼

接下來我們看個例子：輸入框最多隻能輸入六個字元，如何實現？

// 例5
 <input type="text" id='tempInp'>
 <script>
    tempInp.onkeydown = function(ev) {
        ev = ev || window.event;
        let val = this.value.trim() //trim去除字串首位空格（不相容）
        // this.value=this.value.replace(/^ +| +$/g,'') 相容寫法
        let len = val.length
        if (len >= 6) {
            this.value = val.substr(0, 6);
            //阻止預設行為去除特殊按鍵（DELETE\BACK-SPACE\方向鍵...）
            let code = ev.which || ev.keyCode;
            if (!/^(46|8|37|38|39|40)$/.test(code)) {
                ev.preventDefault()
            }
        }
    }
 </script>
複製程式碼
  • event.stopPropagation() & event.stopImmediatePropagation()

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件處理程式被執行。上面提到事件冒泡階段是指事件從目標節點自下而上向window物件傳播的階段。 我們在例4的inner元素click事件上，新增event.stopPropagation()這句話後，就阻止了父事件的執行，最後只打印了'inner'。

 inner.onclick = function(ev) {
    console.log('inner');
    ev.stopPropagation();
};
複製程式碼

stopImmediatePropagation 既能阻止事件向父元素冒泡，也能阻止元素同事件型別的其它監聽器被觸發。而 stopPropagation 只能實現前者的效果。我們來看個例子：

<body>
  <button id="btn">click me to stop propagation</button>
</body>
......
const btn = document.querySelector('#btn');
btn.addEventListener('click', event => {
  console.log('btn click 1');
  event.stopImmediatePropagation();
});
btn.addEventListener('click', event => {
  console.log('btn click 2');
});
document.body.addEventListener('click', () => {
  console.log('body click');
});
// btn click 1
複製程式碼

如上所示，使用 stopImmediatePropagation後，點選按鈕時，不僅body繫結事件不會觸發，與此同時按鈕的另一個點選事件也不觸發。

  • event.target & event.currentTarget

老實說這兩者的區別，並不好用文字描述，我們先來看個例子：

   <div id="a">
        <div id="b">
            <div id="c">
                <div id="d"></div>
            </div>
        </div>
    </div>
    <script>
    document.getElementById('a').addEventListener('click', function(e) {
        console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });
    document.getElementById('b').addEventListener('click', function(e) {
        console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });
    document.getElementById('c').addEventListener('click', function(e) {
        console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });
    document.getElementById('d').addEventListener('click', function(e) {
        console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });
    </script>
複製程式碼

當我們點選最裡層的元素d的時候，會依次輸出:

target:d&currentTarget:d
target:d&currentTarget:c
target:d&currentTarget:b
target:d&currentTarget:a
複製程式碼

從輸出中我們可以看到，event.target指向引起觸發事件的元素，而event.currentTarget則是事件繫結的元素，只有被點選的那個目標元素的event.target才會等於event.currentTarget。也就是說，event.currentTarget始終是監聽事件者，而event.target是事件的真正發出者。

五、參考文章

DOM級別與DOM事件

DOM事件機制解惑

事件模型

JavaScript 事件委託詳解

JavaScript 事件的學與記：stopPropagation 和 stopImmediatePropagation

event.target和event.currentTarget的區別

相關推薦

DOM事件機制(事件捕獲和事件冒泡和事件委托)

使用 tar web strong 事件 所有 span click ner 內容： 1.事件復習 2.事件冒泡與事件捕獲 3.事件委托 1.事件復習 (1)事件 事件是用來處理響應的一個機制，這個響應可以來自於用戶(點擊, 鼠標移動, 滾動), 也可以來自於瀏

DOM事件機制

前言 本文主要介紹DOM事件級別、DOM事件模型、事件流、事件代理和Event物件常見的應用，希望對你們有些幫助和啟發！ 本文首發地址為GitHub部落格,寫文章不易，請多多支援與關注！ 一、DOM事件級別 DOM級別一共可以分為四個級別：DOM0級、DOM1級、DOM2級和DOM3級

深入理解DOM事件機制系列第三篇——事件物件

前面的話 　　在觸發DOM上的某個事件時，會產生一個事件物件event，這個物件中包含著所有與事件有關的資訊。所有瀏覽器都支援event物件，但支援方式不同。本文將詳細介紹事件物件 獲取事件物件 　　【1】一般地，event物件是事件程式的第一個引數 　　[注意

深入理解DOM事件機制系列第二篇——事件處理程式

前面的話 　　事件處理程式又叫事件偵聽器，實際上就是事件的繫結函式。事件發生時會執行函式中相應程式碼。事件處理程式有HTML事件處理程式、DOM0級事件處理程式、DOM2級事件處理程式和IE事件處理程式四類，下面將詳細介紹該部分內容 HTML事件處理程式 　　某個元素支援的每種事件，都可以使用一個與

深入理解DOM事件機制系列第六篇——事件模擬

前面的話 　　事件是網頁中某個特別的瞬間，經常由使用者操作或通過其他瀏覽器功能來觸發。但實際上，也可以使用javascript在任意時刻來觸發特定的事件，而此時的事件就如同瀏覽器建立的事件一樣。本文將詳細介紹事件模擬 引入 　　以下面的實際需求為例，來詳細說明事

dom事件的機制-捕獲，目標，冒泡

機制 IE10以下沒有捕獲階段 例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

C#內置的事件機制和Unity3D姻緣

mono 需要 listen 存在 logs sharp strong 關聯 有一種 最近因為項目，也因為一些其他事情而導致學習的停止，抽個空來記錄下C#內置的事件在Unity3D中的使用。 我需要讓一個物體對鼠標懸停做出事件的響應的情況下，我們通常會創建一個繼承Mon

Dom 事件和JavaScript的詞法分析過程

javascript dom event dom自帶了很多事件，常見的如下所示當觸發這些事件的時候，我們可以執行自定義的各種函數。一般說來，綁定事件有3種方法。第一種方法，直接在標簽上面綁定，比如<input id=‘i1‘ type=‘button‘ onclick=‘ClickOn(th

DOM事件第二彈（UIEvent事件）

復合 綁定 階段 posit 5.1 ble pat fun 出錯 此文章主要總結UIEvent相關的事件，如有不對的地方，歡迎指正。 一、uitls.js(綁定事件公共類) var fixs = { ‘focusin‘: { stand

node.js零基礎詳細教程(4)：node.js事件機制、node異步IO操作

nod server nbsp node i++ 兩個 con 錯誤 定時器 第四章 建議學習時間3小時 課程共10章 學習方式：詳細閱讀，並手動實現相關代碼 學習目標：此教程將教會大家 安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏

PHP實現事件機制實例分析

word-wrap [0 popu except switch targe att otto 對象 PHP實現事件機制實例分析 內置了事件機制的語言不多，php也沒有提供這種功能。事件(Event)說簡單了就是一個Observer模式。實現起來非常ea

JavaScript HTML DOM 事件

pan 代碼 inner date load ntb 用戶 按鈕 scrip 對事件做出反應 我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。 如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代

node.js之事件機制

參數說明 處理 emit tab 大數 參數 事件綁定 綁定 所有 EventEmitter類 方法名與參數描述參數說明 addListener(event,listener) 對指定的事件綁定事件處理函數 參數一是事件名稱，參數二是事件處理函數 on(event

JavaScript HTML DOM事件

splay nbsp onload style blog div 提交 cookies cti HTML DOM 使javaScript有能力對HTML事件作出反應。 HTML事件的例子： 當用戶點擊鼠標時 當網頁已加載時 當圖像已加載時 當鼠標移動到元素上時 當輸入字段

QQ面板拖拽（慕課網DOM事件探秘）（下）

code gin 事件 left drag panel get mouseup onmouseup 2.鼠標事件坐標獲取 function fnDown(event) { var event = event || window.event; var oDr

DOM事件

bsp 點擊事件 鼠標移動 onchange nbsp 改變 click 焦點事件 分類 1、添加方法 1）直接寫在標簽內部； 2）獲取元素後增加點擊事件； 2、常用事件 鼠標點擊事件：onclick 鼠標移動事件：onmousemove 鼠標離開事件：onmouselea

HTML DOM事件

copy 常用 iter hist oca nco res chang list HTML DOM 事件 常用事件 事件描述 onchange HTML 元素改變 onclick 用戶點擊 HTML 元素 onmouseover 用戶在一個HTML元素上移動

Qt事件機制（是動作發生後，一種通知對象的消息，是被動與主動的總和。先處理自己隊列中的消息，然後再處理系統消息隊列中的消息）

str 發送 filter 簡化 後者 nts 類型 min() 鼠標滾輪 Qt事件機制 Qt程序是事件驅動的, 程序的每個動作都是由幕後某個事件所觸發.。 Qt事件的發生和處理成為程序運行的主線，存在於程序整個生命周期。 Qt事件的類型很多, 常見的qt的事件如下:

IE和DOM事件流、普通事件和綁定事件的區別

strong clas doc cap () 添加多個 nbsp class 器） IE和DOM事件流的區別 IE采用冒泡型事件 Netscape（網絡信息瀏覽器）使用捕獲型事件 DOM使用先捕獲後冒泡型事件 示例： <body> <div

js事件機制

image blog div clas http com alt bubuko 機制 js事件屬性： js事件機制