JavaScript DOM 事件模型

来源:https://www.cnblogs.com/pgjett/archive/2020/04/03/12624320.html
-Advertisement-
Play Games

JavaScript 是基於面向對象和事件驅動的一門語言，事件模型是 DOM 中至關重要的內容，理解事件驅動機制、事件反饋、事件冒泡、事件捕獲以及事件委托能幫助我們更好的處理事件，寫出更優的代碼 ...


JavaScript DOM 事件模型

JavaScript 是基於面向對象和事件驅動的一門語言，事件模型是 DOM 中至關重要的內容，理解事件驅動機制、事件反饋、事件冒泡、事件捕獲以及事件委托能幫助我們更好的處理事件，寫出更優的代碼

事件驅動機制

  1. 當事件發生時，我們收到事件的反饋，在 JavaScript 中，事件反饋是我們自行定義的事件處理函數
  2. 事件，如點擊事件、滑鼠移入事件等，是每一個元素與生俱來的能力
  3. 通常說的綁定事件，實際上是綁定事件的反饋，即事件處理函數
  4. 例如點擊一個按鈕，按鈕元素對象是事件發送器或事件源，事件是滑鼠點擊事件，事件處理函數是偵聽器
  5. 元素對象發出事件，事件處理函數做出反應，這就是 JS 的事件驅動機制

在觀察者模式中，事件發送器就是主題，事件處理函數即偵聽器就是觀察者

綁定事件反饋

  1. 內聯屬性

    <button onclick="test()">按鈕</button>

    介於結構和邏輯要相分離，不建議使用內聯方式綁定

  2. 事件句柄

    var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function() {
    // this -> oBtn
}

    相容性好，但是重覆綁定會覆蓋

  3. 事件監聽器

    var oBtn = document.getElementsByTagName('button')[0];
oBtn.addEventListener("click", funtion(){
    // this -> oBtn
 }, false);
oBtn.addEventListener("click", test, false);
funtion test(){ 
    // 事件處理函數
}

    重覆添加，不會覆蓋之前添加的監聽器，但是如果事件類型、事件處理函數和最後一個布爾參數都相同，則不會重覆執行

    IE8 及以下不支持 addEventListener，可用 attachEvent 代替

    var oBtn = document.getElementsByTagName('button')[0];
oBtn.attachEvent("onclick", funtion(){
	// this -> window
    }); 
// 區別於 addEventListener，第一個參數使用 'onclick'，而不是 'click'
// 並且內部 this 指向 window
// 對於 attachEvent，如果事件類型、事件處理函數都相同，還是會重覆執行

    相容性封裝

    function addEvent(elem, type, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(type, fn, false);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function(ev) {
                fn.call(elem, ev); // call 相容性比 bind 好
            });
    } else {
        elem['on' + type] = fn;
    }
}

  4. 解除綁定

    oBtn.onclik = null;
oBtn.removeEventListener("click", test, false); // 解除 addEventListener
oBtn.detachEvent('onclick', test); // 解除 attachEvent

    示例：點擊一次後清除事件反饋

    oBtn.onclik = function() {
	// ...
    this.onclick = null;
}
// 非嚴格模式
oBtn.addEventListener("click", funtion() {
	// ...
    this.removEventListener('cilck', arguments.callee, false);
	}, false);
// 嚴格模式
oBtn.addEventListener("click", funtion temp() {
	// ...
    this.removeEventListener('click', temp, false);
	}, false);

事件冒泡和捕獲

  1. 事件冒泡：當一個元素髮生事件時，該事件會向父級元素傳遞，按由子到父的順序觸發一連串的事件反饋，稱之為事件冒泡

    DOM 上的嵌套關係會產生事件冒泡，例如兩個 div 嵌套，點擊內部的 div，觸發內部 div 的點擊事件，內部 div 的點擊事件處理函數進行響應，這個事件向其父級即外部 div 傳遞，外部 div 也有點擊事件，外部 div 所綁定的點擊事件反饋也會響應

    <div class="outer">
    <div class="inner"></div>
</div>

    var outer = document.getElementsByClassName('outer')[0],
    inner = outer.getElementsByClassName('inner')[0];
outer.addEventListener('click', function () {
    console.log('bubble outer');
}, false);
inner.addEventListener('click', function () {
    console.log('bubble inner');
}, false);
// addEventListener 最後一個參數預設值為 false，表示事件冒泡
// 點擊 inner，列印出
// bubble inner 
// bubble outer

  2. 事件捕獲：當一個元素髮生事件時，該事件會向父級元素傳遞，按由父到子的順序觸發一連串的事件反饋，稱之為事件捕獲

    事件捕獲與事件冒泡的觸發順序相反，同樣需要 DOM 上的嵌套關係

    outer.addEventListener('click', function () {
    console.log('outer');
}, true);
inner.addEventListener('click', function () {
    console.log('inner');
}, true);
// addEventListener 最後一個參數使用 true，表示事件捕獲
// 點擊 inner，列印出
// outer
// in

  3. 捕獲和冒泡的執行順序

    outer.addEventListener('click', function () {
    console.log('bubble outer');
}, false); // 冒泡
inner.addEventListener('click', function () {
    console.log('bubble inner');
}, false); // 冒泡
outer.addEventListener('click', function () {
    console.log('outer');
}, true); // 捕獲
inner.addEventListener('click', function () {
    console.log('inner');
}, true); // 捕獲
// 點擊 inner，列印出
// outer
// bubble inner
// inner
// bubble outer

    點擊一個元素，元素即事件源，若事件源綁定了事件處理函數，且設定了事件捕獲，則先執行捕獲，捕獲執行完畢後，按照綁定順序執行該事件源綁定的事件，如果設定了事件冒泡，再執行冒泡

  4. focus blur change submit reset select 事件沒有冒泡和捕獲，IE 瀏覽器沒有事件捕獲

阻止事件冒泡

  1. 阻止冒泡的方法

    Event 的原型上有 stopPropagation 方法，可以阻止冒泡，是 w3c 的規範

    Event 的原型上有 cancleBubble 屬性，賦值為 true，可以阻止冒泡

  2. addEventListener 綁定事件處理函數，拿到事件對象

    var outer = document.getElementsByClassName('outer')[0],
    inner = outer.getElementsByClassName('inner')[0];
inner.addEventListener('click', function (ev) {
    	console.log(ev); // 事件對象 ev
    	ev.stopPropagation(); // 阻止事件冒泡
    }, false);

  3. IE 瀏覽器沒有 stopPropagation 方法，可以使用 cancelBubble 屬性

    註意：IE 瀏覽器中事件對象存放在 window.event 中。IE8 不支持 addEventListener 方法

    // 封裝阻止冒泡的方法
function cancelBubble(ev) {
    if (ev.stopPropagation) {
        ev.stopPropagation();
    } else ev.cancelBubble = true; // 相容 IE8 及以下
}
// 使用上文中封裝好的 addEvent 方法
function addEvent(elem, type, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(type, fn);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function (ev) {
            fn.call(elem, ev);
        });
    } else {
        elem['on' + type] = fn;
    }
}
// 綁定事件處理函數
var outer = document.getElementsByClassName('outer')[0],
    inner = outer.getElementsByClassName('inner')[0];
addEvent(inner, 'click', function (ev) {
        var ev = ev || window.event; // IE 相容性寫法
    	cancelBubble(ev); // 阻止冒泡
    });

阻止預設事件

  1. 三種方法

    • 事件對象 preventDefault() 方法，相容 IE9 及以上
    • 事件對象 returnValue = false，相容 IE8 及以下
    • 事件處理函數 return false

  2. 相容性寫法

    function preventDefaultEvent(ev) {
    if (ev.preventDefault) {
        ev.preventDefault();
    } else ev.returnValue = false; // 相容 IE8 及以下
}

  3. 右鍵菜單事件

    document.oncontextmenu = function (ev) {
    var ev = ev || window.event;
    // 1. ev.preventDefault();  // IE9 及以上
    // 2. ev.returnValue = false; // IE8 及以下
    // 3. return false;
}

  4. a 標簽跳轉事件

    href 使用偽協議

    <a href="javascript:void(0);">a 標簽</a> 
<a href="javascript:;">a 標簽</a> 
<a href="#">a 標簽</a> <!--跳轉到當前頁面頂部-->

    onclick 事件 return false

    <a href="http://www.baidu.com" onclick="return false">a 標簽</a>
<a href="http://www.baidu.com" onclick="return test(),false">a 標簽</a>
<!--第二個是利用了 “,” 分隔符會返回最後一個的特點，與 test 方法無關-->

    綁定事件處理函數

    <!--內聯綁定-->
<a id='taga' href="http://www.baidu.com" onclick="return test()">a 標簽</a>
<!--句柄綁定-->
<script>
    document.getElementById('taga').onclick = test;
    function test(ev) {
       var ev = ev || window.event;
    	// 1. ev.preventDefault();  // IE9 及以上
    	// 2. ev.returnValue = false; // IE8 及以下
    	// 3. return false;
    }
    // 前兩種方式在使用內聯屬性綁定時，不需要在屬性上加 return，第三種則需要
</script>

    表單的 action 屬性支持 javascript: 偽協議，onsubmit 或者提交按鈕點擊事件都可以綁定處理函數，阻止提交的方法和阻止 a 標簽跳轉的方法類似

冒泡捕獲流

  1. 事件流：描述從頁面中接收事件的順序

  2. 事件冒泡流：微軟 IE 提出，Event Bubbling

  3. 事件捕獲流：網景 Netscape 提出，Event Capturing

  4. 事件流三個階段：事件捕獲階段、處於目標階段、事件冒泡階段

    元素觸發事件時，首先事件捕獲階段，由父到子的執行事件處理函數，然後處於目標階段，該元素的事件處理函數按綁定順序執行，最後事件冒泡階段，由子到父的執行事件處理函數

事件和事件源

  1. 事件即事件對象，可以由事件處理函數的參數拿到

    IE8 及以下中事件對象存放在 window.event 中

    // btn 按鈕元素
btn.onclick = function(ev) {
    var ev = ev || window.event; // IE8 相容性寫法
}

  2. 事件源即事件源對象，是發生事件的元素，即事件發送器，可以從事件對象中獲取

    IE8 及以下只有 srcElement，firefox 低版本只有 target，chrome 兩者都有

    // btn 按鈕元素
btn.onclick = function(ev) {
    var ev = ev || window.event; // IE8 相容性寫法
    var tar = ev.target || ev.srcElement; // 獲取事件源的相容性寫法
}

事件委托

  1. 事件委托也叫事件代理，指對父級元素綁定事件處理函數，通過獲取事件源來處理子元素

  2. 示例：點擊按鈕使列表 ul 增加 li 元素，點擊每個 li 元素列印出其中的內容（innerHTML）

    如果不使用事件委托，需要迴圈對每個 li 進行綁定，點擊按鈕添加新的 li 元素後也要進行綁定，效率低下

    使用事件委托，直接對 ul 綁定點擊事件處理函數，獲取事件對象、事件源對象，再對源對象進行處理

    <body>
<button>btn</button>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var oBtn = document.getElementsByTagName('button')[0],
        oList = document.getElementsByTagName('ul')[0],
        oLi = oList.getElementsByTagName('li');
    oBtn.onclick = function () {
        var li = document.createElement('li');
        li.innerText = oLi.length + 1;
        oList.appendChild(li);
    }
    oList.onclick = function (ev) {
        var ev = ev || window.event,
            tar = ev.target || ev.srcElement;
        // tar 即為被點擊的 li 元素
        console.log(tar.innerHTML); 
        // 返回在所有兄弟元素中的索引，借用數組 indexOf 方法
        console.log(Array.prototype.indexOf.call(oLi, tar));
    }
</script>
</body>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ES6語法：函數新特性（一）
    ES6 函數 引言： 函數在任何語言中偶讀很重要，java裡面的函數通常叫做方法，其實是一個東西，使用函數可以簡化更多的代碼，代碼結構看著更加清晰。今天我們來學學ES6語法中，函數有什麼變化。 雖然現在的有比ES6更高的版本，但是主流一般都是ES6。es6中的函數相對於之前的版本提升了很多，相對來說 ...
  • js密碼強弱正則校驗、郵箱校驗
    //強弱密碼校驗,密碼至少包含大寫字母，小寫字母，數字，且不少於8位 var tx = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/; var pass = 'aaaa12345' if(!tx.test(pass)){ alert("弱密碼"); }els ...
  • js語法筆記
    註：腦容量有限，本筆記主要記錄本人認為較為有用的js方法 1、sessionStorage ：用於臨時保存同一視窗(或標簽頁)的數據，在關閉視窗或標簽頁之後將會刪除這些數據。（如需長期保存可用 localStorage） 語法：window.sessionStorage 保存數據：essionSto ...
  • 調試 node.js 程式
    在程式開發中，如何快速的查找定位問題是一項非常重要的基本功。在實際開發過程中，或多或少都會遇到程式出現問題導致無法正常運行的情況，因此，調試代碼就變成了一項無法避免的工作。這裡簡單介紹下如何調試 node.js 程式。 ...
  • 利用vertical-align屬性實現分隔符
    網頁設計中經常用到標題之間的分隔符的樣式，即用短豎線分隔幾個關鍵詞，最近發現了一種簡單可行的方式，即通過vertical-align屬性來實現分隔符樣式，在這邊分享給大家： <!DOCTYPE html> <html> <head> <title></title> <style> div { hei ...
  • 前端經典面試題解密-add(1)(2)(3)(4) == 10到底是個啥？
    前言 前端的小伙伴在面試的時候，幾乎都會遇到一道這樣的面試題： add(1)(2)(3)(4)輸出結果為10。在第一次看到這道面試題的時候，很多小伙伴感到了迷茫！借用王寶強在《人在囧途》中的表演：啥啥啥，這寫的都是啥？下麵胡哥為各位小伙伴帶來這道題的揭秘。 一、核心點 基礎函數的變種 函數柯里化 我 ...
  • 簡單理解vertical-align屬性和基線
    vertical-align屬性主要用於改變行內元素的對齊方式，對於行內佈局影響很大，如果不瞭解的話，我們開發調整樣式的時候很容易出錯。 網上關於這個屬性的原理說得很是複雜，看一眼就讓人覺得望而生畏，而且大可不必完全理解其原理，只要懂得其規律，我們足夠使用即可，下麵把我的理解分享給大家： 基線 要了 ...
  • 使用室內三維地圖引擎ESMap來管理攝像頭設備、消防設備和人員軌跡展示
    目前室內三維地圖如何輕量化，能夠在手機微信、電腦瀏覽器等平臺快速顯示地圖，顯示的地圖性能好，轉動地圖不卡是大家都要面對的問題， 使用室內三維地圖引擎ESMap後目前可以不用操心這方面的問題，開發只需要關心設備如何加到地圖上進行管理，本文章主要介紹攝像頭圖層、消防設備圖層和人員軌跡圖層進行介紹，方便大... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類