資訊專欄INFORMATION COLUMN
摘要：本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的，我們的事件處理方式也是不一樣的。當然其優點是不需要操作來完成事件的綁定。文章地址事件深入淺出二。
在項目開發時，我們時常需要考慮用戶在使用產品時產生的各種各樣的交互事件，比如鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發條件和觸發效果。本文就將帶大家深入淺出地了解DOM事件的那些屬性和方法。
首先在介紹DOM事件之前我們先來認識下DOM的不同級別。針對不同級別的DOM，我們的DOM事件處理方式也是不一樣的。
DOM級別與DOM事件DOM級別一共可以分為4個級別：DOM0級，DOM1級，DOM2級和 DOM3級，而DOM事件分為3個級別：DOM0級事件處理，DOM2級事件處理和DOM3級事件處理。如下圖所示：
有人可能會問，為什么沒有DOM1級事件處理呢？因為1級DOM標準中并沒有定義事件相關的內容，所以沒有所謂的1級DOM事件模型。
關于DOM級別這里不做詳細的介紹，下面主要介紹下不同級別DOM中的不同事件。
1.DOM0級事件在了解DOM0級事件之前，我們有必要先了解下HTML事件處理程序，也是最早的這一種的事件處理方式，代碼如下：
以上代碼我們通過直接在HTML代碼里定義了一個onclick的屬性觸發showFn方法，這樣的事件處理程序最大的缺點就是HTML于JS強耦合，我們一旦需要修改函數名就得修改兩個地方。當然其優點是不需要操作DOM來完成事件的綁定。
那么什么是DOM0級處理事件呢？DOM0級事件就是將一個函數賦值給一個事件處理屬性，比如：
以上代碼我們給button定義了一個id，通過JS獲取到了這個id的按鈕，并將一個函數賦值給了一個事件處理屬性onclick，這樣的方法便是DOM0級處理事件的體現。我們可以通過給事件處理屬性賦值null來解綁事件。
DOM0級事件處理程序的缺點在于一個處理程序無法同時綁定多個處理函數，比如我還想在按鈕點擊事件上加上另外一個函數。
2.DOM2級事件DOM2級事件在DOM0級事件的基礎上彌補了一個處理程序無法同時綁定多個處理函數的缺點，允許給一個處理程序添加多個處理函數。代碼如下：
DOM2級事件定義了addEventListener和removeEventListener兩個方法，分別用來綁定和解綁事件，方法中包含3個參數，分別是綁定的事件處理屬性名稱（不包含on）、處理函數和是否在捕獲時執行事件處理函數。如果我們還需要添加一個鼠標移入的方法，只需要：
btn.addEventListener("mouseover", showFn, false);
這樣點擊按鈕和鼠標移入時都將觸發showFn方法。
需要注意的是IE8級以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent來實現：
btn.attachEvent("onclick", showFn); // 綁定事件
btn.detachEvent("onclick", showFn); // 解綁事件
這里我們不需要傳入第三個參數，因為IE8級以下版本只支持冒泡型事件。
3.DOM3級事件DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型，全部類型如下：
UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll
焦點事件，當元素獲得或失去焦點時觸發，如：blur、focus
鼠標事件，當用戶通過鼠標在頁面執行操作時觸發如：dbclick、mouseup
滾輪事件，當使用鼠標滾輪或類似設備時觸發，如：mousewheel
文本事件，當在文檔中輸入文本時觸發，如：textInput
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發，如：keydown、keypress
合成事件，當為IME（輸入法編輯器）輸入字符時觸發，如：compositionstart
變動事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified
同時DOM3級事件也允許使用者自定義一些事件。
DOM事件流上文中講到了addEventListener的第三個參數為指定事件是否在捕獲或冒泡階段執行，設置為true表示事件在捕獲階段執行，設置為true表示事件在捕獲階段執行，而設置為false表示事件在冒泡階段執行。那么什么是事件冒泡和事件捕獲呢？可以用下圖來解釋：
1.事件冒泡所謂事件冒泡就是事件像泡泡一樣從最開始生成的地方一層一層往上冒，比如上圖中a標簽為事件目標，點擊a標簽后同時也會觸發p、li上的點擊事件，一層一層向上直至最外層的html或document。下面是代碼示例：
上面的代碼運行后我們點擊a標簽，首先會彈出"我是目標事件"提示，然后又會彈出"事件冒泡至DIV"的提示，這便說明了事件自內而外向上冒泡了。
那么我們如何阻止事件冒泡呢？這里就涉及事件的Event對象中的stopPropagation方法，如下：
child.addEventListener("click", function(e) {
alert("我是目標事件");
e.stopPropagation();
}, false);
加上stopPropagation方法后，我們再次點擊a標簽就不會觸發div上的click事件了。
2.事件捕獲和事件冒泡相反，事件捕獲是自上而下執行，我們只需要將addEventListener的第三個參數改為true就行。
此時我們點擊a標簽，首先彈出的是"事件冒泡至DIV"，其次彈出的是"我是目標事件"，正好與事件冒泡相反。
總結本文主要介紹了不同DOM級別下的事件處理程序，同時介紹了事件冒泡和捕獲的觸發原理和方法。熟練地使用不同級別的DOM事件并且解決相應的瀏覽器兼容性問題對我們的前端項目開發會很有幫助。在下篇文章中，我將給大家介紹DOM事件中Event對象的屬性和方法。文章地址：DOM 事件深入淺出（二）。
本文為勞卜原創文章，首發于微信公眾號：前端呼啦圈（Love-FED）
轉載請注明來自——微信公眾號：前端呼啦圈（Love-FED）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80620.html
摘要：在事件深入淺出一中，我主要給大家講解了不同級別下的事件處理程序，同時介紹了事件冒泡和捕獲的觸發原理和方法。方法主要用于阻止事件的進一步傳播，比如阻止事件繼續向上層冒泡。備注文本參考自權威指南一書及慕課網教程事件揭秘。 在DOM事件深入淺出（一）中，我主要給大家講解了不同DOM級別下的事件處理程序，同時介紹了事件冒泡和捕獲的觸發原理和方法。本文將繼續介紹DOM事件中的知識點，主要側重于D...
摘要：中的事件不存在以上問題掛載的每個函數都可以控制在組件中，不會污染全局空間中沒有產生直接使用的，而是使用了事件委托方式處理，無論有多少個出現，其實最后都只在樹上添加了一個事件處理函數，掛在最頂層的節點上。 深入淺出React（一） 1、create-react-app工具使用 安裝create-react-app npm install create-react-app -g 創...
摘要：深入理解事件機制一事件流事件就是當用戶或者瀏覽器自身執行的某種動作，諸如等都是事件的名稱，那響應個事件的函數就稱為事件處理程序事件處理函數事件句柄。 深入理解js Dom事件機制（一）——事件流 事件就是當用戶或者瀏覽器自身執行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應個事件的函數就稱為事件處理程序（事件處理函數、事件句柄）。 事件處理程序的名字都是以on...
摘要：深入理解事件機制一事件流事件就是當用戶或者瀏覽器自身執行的某種動作，諸如等都是事件的名稱，那響應個事件的函數就稱為事件處理程序事件處理函數事件句柄。 深入理解js Dom事件機制（一）——事件流 事件就是當用戶或者瀏覽器自身執行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應個事件的函數就稱為事件處理程序（事件處理函數、事件句柄）。 事件處理程序的名字都是以on...
摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。更新無需重新綁定事件處理器，因為事件代理對不同子元素可采用不同處理方法。 首先我們思考一個很有意思的事情：一張紙上畫了兩個同心圓，當我們把手指放到圓心上時，手指指向的不是一個圓，而是紙上的兩個圓，同理之，當我們單擊網頁上的一個div...
閱讀 1405·2021-11-25 09:43
閱讀 2261·2021-09-27 13:36
閱讀 1114·2021-09-04 16:40
閱讀 1957·2019-08-30 11:12
閱讀 3309·2019-08-29 14:14
閱讀 566·2019-08-28 17:56
閱讀 1320·2019-08-26 13:50
閱讀 1246·2019-08-26 13:29
