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

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

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

首先來(lái)看不需要操控DOM的事件

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

同樣以上面的程序?yàn)槔?，使用DOM0事件處理就是下面的樣子

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
        

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

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

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

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

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

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

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

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

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

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

  

    
1
    
2
    
3
    
4
  

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

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

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

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

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

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