資訊專欄INFORMATION COLUMN
摘要：而由于級標準中并沒有定義事件相關的內容，所以事件級別只包括級，級和級三種。此屬性返回當前事件所綁定的對象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。
前端學習的東西有很多，現代前端開發，前端工程化的東西要懂，基礎的原生js也要懂，畢竟，框架都是有生命周期的，更替非常快，然而卻有這么一個框架，它是最輕量的前端框架，每個瀏覽器都內置，它叫vanilla.js。好吧，其實vanilla.js就是原生js，不過是網上的一個玩笑而已，但是卻能說明一個很重要的問題，就是原生js很重要，所以這部分文章是關于前端開發中原生js的一系列問題的，這篇談一談DOM事件。
DOM事件級別DOM分四個級別，一級，二級，三級，沒有零級但是通常把DOM1規范形成之前的稱為DOM0。而由于1級DOM標準中并沒有定義事件相關的內容，所以DOM事件級別只包括DOM0級，DOM2級和DOM3級三種。
首先來看不需要操控DOM的事件
這段代碼大家肯定都見過，不需要控制DOM，事件處理時間的函數直接寫在html屬性中。當然實際開發中應該沒有人這樣寫了，理由也很簡單，html和js強耦合，無論是編寫還是維護都沒有任何好處，于是就有了DOM事件處理。
DOM0級事件同樣以上面的程序為例，使用DOM0事件處理就是下面的樣子
同樣很簡單，前端開發者一定都不陌生，DOM0事件定義需要兩部，先找到DOM節點，然后把處理函數賦值給該節點對象的事件屬性。如果想解除事件，那么只要把null賦值給事件屬性即可。DOM0級事件無法給一個事件添加多個處理函數，
DOM2級事件上面的程序使用DOM2級事件處理就是這樣的
DOM2級事件使用addEventListener，里面有三個參數，第一個參數是事件名，就是事件屬性去掉on，第二個參數是事件處理函數，第三個參數是是否在事件捕獲階段執行（關于事件冒泡和事件捕獲下面會介紹）。使用DOM2事件可以隨意添加多個處理函數，移除DOM2事件要用removeEventListener，傳入的三個參數與添加事件完全相同。特別的舊版本IE瀏覽器（IE8及一下），需要使用attachEvent和detachEvent來添加和移除事件,傳入兩個參數第一個是事件屬性（包含on），第二個是處理函數，不支持事件捕獲所以沒有第三個參數。
DOM3級事件DOM3級事件就是在DOM2基礎上增加了更多的事件類型
UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll
焦點事件，當元素獲得或失去焦點時觸發，如：blur、focus
鼠標事件，當用戶通過鼠標在頁面執行操作時觸發如：dbclick、mouseup
滾輪事件，當使用鼠標滾輪或類似設備時觸發，如：mousewheel
文本事件，當在文檔中輸入文本時觸發，如：textInput
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發，如：keydown、keypress
合成事件，當為IME（輸入法編輯器）輸入字符時觸發，如：compositionstart
變動事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified
DOM事件級別的發展使得事件處理更加完整豐富，而下一個問題就是之前提到的事件冒泡和事件捕獲。
事件冒泡和事件捕獲有以下HTML結構
我是目標內容
現在給最里面的目標內容綁定事件，就會有一個從事件源和目標之間的事件流，此例中，事件流的方向為window -> document -> html -> body -> div -> span -> 目標 -> span -> div -> body -> html -> document -> window ,整個事件流分為兩個部分，以事件目標為界限，從window到目標這個過程為事件捕獲，從目標回到window的過程叫事件冒泡。如圖所示：
事件默認的處理階段為冒泡階段，可以把addEventListener第三個參數設置為true來讓時間在捕獲階段被處理，不過通常不建議這樣做。實際開發中，經常會利用到事件冒泡，也經常需要阻止事件冒泡，這就涉及到事件對象event的相關內置方法和屬性了。
event對象事件處理函數會回調一個參數event，代表當前事件對象，event中有很多常用的方法和屬性
preventDefault 阻止默認行為，比如當點擊submit按鈕時候，可以采用此方法阻止表單提交。
stopPropagation 停止事件冒泡，需要防止事件冒泡帶來的負面影響的時候就要使用該方法。
stopImmediatePropagation 阻止后續事件，該方法除了阻止事件冒泡外在當前事件被綁定多個處理程序的時候，后續的處理程序也會被阻止。
currentTarget 此屬性返回當前事件所綁定的對象。
target 此屬性返回當前觸發事件的對象，注意target是觸發事件的對象，是真正的事件源，同樣以上面的HTML為例，給div綁定一個事件，點擊帶文字的span后，target是span，而currentTarget是div。
事件冒泡和target屬性能做很多事情，比如考慮下面的結構
如果想要實現點擊每個li標簽就能打印出文本內容，我們可以不用給每個li綁定事件，只需要利用事件冒泡即可
var click = document.getElementById("click");
click.addEventListener("click", log, false);
function log(e) {
console.log(e.target.innerText);
}
自定義事件
除了系統內置的事件外，我們還可以自定義事件，由于平時使用的不多可能感覺會很高端，其實自定義事件并不復雜
var myEvent = new Event("myEvent");
document.addEventListener("myEvent", log, false);
function log() {
console.log("hello event");
}
document.dispatchEvent(myEvent);
通過創建Event對象來創建事件，通過dispatchEvent函數派發事件。自定義事件可以綁定到任意DOM元素上，此處選擇document只是為了演示方便。
以上就是關于DOM事件的相關內容總結，接下來后面還會有其他技術的相關文章。
歡迎關注https://fx109138.github.io/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92536.html
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定組件事件上一篇已經 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...
摘要：今天同學去面試，做了兩道面試題全部做錯了，發過來給道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 排序算法 -- JavaScript 標準參考教程（alpha） - 前端 - 掘金來自《JavaScript 標準參考教程（alpha）》，by 阮一峰 目錄 冒泡排序 簡介 算法實現 選擇排序 簡介 算法實現 ... 圖例詳解那道 setTimeout 與循環閉包的經典面...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定標簽事件這里的綁定 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...
摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
閱讀 2320·2021-09-29 09:42
閱讀 556·2021-09-06 15:02
閱讀 2595·2021-09-02 15:40
閱讀 2110·2019-08-30 14:23
閱讀 1860·2019-08-30 13:48
閱讀 1289·2019-08-26 12:01
閱讀 957·2019-08-26 11:53
閱讀 2141·2019-08-23 18:31
