摘要：而由于級標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容，所以事件級別只包括級，級和級三種。此屬性返回當(dāng)前事件所綁定的對象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。

前端學(xué)習(xí)的東西有很多，現(xiàn)代前端開發(fā)，前端工程化的東西要懂，基礎(chǔ)的原生js也要懂，畢竟，框架都是有生命周期的，更替非?？?，然而卻有這么一個框架，它是最輕量的前端框架，每個瀏覽器都內(nèi)置，它叫vanilla.js。好吧，其實vanilla.js就是原生js，不過是網(wǎng)上的一個玩笑而已，但是卻能說明一個很重要的問題，就是原生js很重要，所以這部分文章是關(guān)于前端開發(fā)中原生js的一系列問題的，這篇談一談DOM事件。

DOM分四個級別，一級，二級，三級，沒有零級但是通常把DOM1規(guī)范形成之前的稱為DOM0。而由于1級DOM標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容，所以DOM事件級別只包括DOM0級，DOM2級和DOM3級三種。

首先來看不需要操控DOM的事件

這段代碼大家肯定都見過，不需要控制DOM，事件處理時間的函數(shù)直接寫在html屬性中。當(dāng)然實際開發(fā)中應(yīng)該沒有人這樣寫了，理由也很簡單，html和js強耦合，無論是編寫還是維護都沒有任何好處，于是就有了DOM事件處理。

同樣以上面的程序為例，使用DOM0事件處理就是下面的樣子

同樣很簡單，前端開發(fā)者一定都不陌生，DOM0事件定義需要兩部，先找到DOM節(jié)點，然后把處理函數(shù)賦值給該節(jié)點對象的事件屬性。如果想解除事件，那么只要把null賦值給事件屬性即可。DOM0級事件無法給一個事件添加多個處理函數(shù)，

上面的程序使用DOM2級事件處理就是這樣的

DOM2級事件使用addEventListener，里面有三個參數(shù)，第一個參數(shù)是事件名，就是事件屬性去掉on，第二個參數(shù)是事件處理函數(shù)，第三個參數(shù)是是否在事件捕獲階段執(zhí)行（關(guān)于事件冒泡和事件捕獲下面會介紹）。使用DOM2事件可以隨意添加多個處理函數(shù)，移除DOM2事件要用removeEventListener，傳入的三個參數(shù)與添加事件完全相同。特別的舊版本IE瀏覽器（IE8及一下），需要使用attachEvent和detachEvent來添加和移除事件,傳入兩個參數(shù)第一個是事件屬性（包含on），第二個是處理函數(shù)，不支持事件捕獲所以沒有第三個參數(shù)。

DOM3級事件就是在DOM2基礎(chǔ)上增加了更多的事件類型

UI事件，當(dāng)用戶與頁面上的元素交互時觸發(fā)，如：load、scroll

焦點事件，當(dāng)元素獲得或失去焦點時觸發(fā)，如：blur、focus

鼠標(biāo)事件，當(dāng)用戶通過鼠標(biāo)在頁面執(zhí)行操作時觸發(fā)如：dbclick、mouseup

滾輪事件，當(dāng)使用鼠標(biāo)滾輪或類似設(shè)備時觸發(fā)，如：mousewheel

文本事件，當(dāng)在文檔中輸入文本時觸發(fā)，如：textInput

鍵盤事件，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)，如：keydown、keypress

合成事件，當(dāng)為IME（輸入法編輯器）輸入字符時觸發(fā)，如：compositionstart

變動事件，當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)，如：DOMsubtreeModified

DOM事件級別的發(fā)展使得事件處理更加完整豐富，而下一個問題就是之前提到的事件冒泡和事件捕獲。

有以下HTML結(jié)構(gòu)

    
        

            
                我是目標(biāo)內(nèi)容
            
        
    

現(xiàn)在給最里面的目標(biāo)內(nèi)容綁定事件，就會有一個從事件源和目標(biāo)之間的事件流，此例中，事件流的方向為window -> document -> html -> body -> div -> span -> 目標(biāo) -> span -> div -> body -> html -> document -> window ,整個事件流分為兩個部分，以事件目標(biāo)為界限，從window到目標(biāo)這個過程為事件捕獲，從目標(biāo)回到window的過程叫事件冒泡。如圖所示：

事件默認(rèn)的處理階段為冒泡階段，可以把addEventListener第三個參數(shù)設(shè)置為true來讓時間在捕獲階段被處理，不過通常不建議這樣做。實際開發(fā)中，經(jīng)常會利用到事件冒泡，也經(jīng)常需要阻止事件冒泡，這就涉及到事件對象event的相關(guān)內(nèi)置方法和屬性了。

事件處理函數(shù)會回調(diào)一個參數(shù)event，代表當(dāng)前事件對象，event中有很多常用的方法和屬性

preventDefault 阻止默認(rèn)行為，比如當(dāng)點擊submit按鈕時候，可以采用此方法阻止表單提交。

stopPropagation 停止事件冒泡，需要防止事件冒泡帶來的負(fù)面影響的時候就要使用該方法。

stopImmediatePropagation 阻止后續(xù)事件，該方法除了阻止事件冒泡外在當(dāng)前事件被綁定多個處理程序的時候，后續(xù)的處理程序也會被阻止。

currentTarget 此屬性返回當(dāng)前事件所綁定的對象。

target 此屬性返回當(dāng)前觸發(fā)事件的對象，注意target是觸發(fā)事件的對象，是真正的事件源，同樣以上面的HTML為例，給div綁定一個事件，點擊帶文字的span后，target是span，而currentTarget是div。

事件冒泡和target屬性能做很多事情，比如考慮下面的結(jié)構(gòu)

  

    
1
    
2
    
3
    
4
  

如果想要實現(xiàn)點擊每個li標(biāo)簽就能打印出文本內(nèi)容，我們可以不用給每個li綁定事件，只需要利用事件冒泡即可

  var click = document.getElementById("click");
  click.addEventListener("click", log, false);
  function log(e) {
    console.log(e.target.innerText);
  }

除了系統(tǒng)內(nèi)置的事件外，我們還可以自定義事件，由于平時使用的不多可能感覺會很高端，其實自定義事件并不復(fù)雜

  var myEvent = new Event("myEvent");
  document.addEventListener("myEvent", log, false);
  function log() {
    console.log("hello event");
  }
  document.dispatchEvent(myEvent);

通過創(chuàng)建Event對象來創(chuàng)建事件，通過dispatchEvent函數(shù)派發(fā)事件。自定義事件可以綁定到任意DOM元素上，此處選擇document只是為了演示方便。

以上就是關(guān)于DOM事件的相關(guān)內(nèi)容總結(jié)，接下來后面還會有其他技術(shù)的相關(guān)文章。
歡迎關(guān)注https://fx109138.github.io/