一．（1）事件源（事件目標(biāo)）：在哪個(gè)組件上發(fā)生的事件，也就是發(fā)生事件的作用體或與之相關(guān)的對(duì)象。任何元素，body,html元素等等，都可以作為事件源。

（2）事件：事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。比如：click,load,等等都是事件的名字。

（3）事件類(lèi)型：表單事件，window事件，鼠標(biāo)事件，鍵盤(pán)事件等。

??常用表單事件：

????????focus（不冒泡，IE和ES5支持冒泡的focusin）?焦點(diǎn)事件，blur(不冒泡，IE和ES5支持冒泡的focusout)?失去焦點(diǎn)事件，submit??提交事件，change?改變事件，input??文本輸入事件；

??常用的window事件：

????????load?加載事件?，unload?關(guān)閉事件，beforeunload?關(guān)閉之前的事件。DOMContentLoaded,它在DOM加載之后及資源加載之前被觸發(fā)事件。?readyStatechage??當(dāng)頁(yè)面加載狀態(tài)改變事件.?

???常用的鼠標(biāo)事件：

???????click??單擊事件，dbclick?雙擊事件，textcontentmenu?文本菜單事件，mouseover?鼠標(biāo)放上事件，mouseout?鼠標(biāo)離開(kāi)事件，mousedown?鼠標(biāo)按下事件，mouseup?鼠標(biāo)抬起事件，mousemove?鼠標(biāo)移動(dòng)事件，mouseenter??鼠標(biāo)移入事件，mouseleave?鼠標(biāo)移除事件

??常用鍵盤(pán)事件：

??????keypress???鍵盤(pán)事件，keyup?鍵盤(pán)抬起事件，?keydown?鍵盤(pán)按下事件，

（4）事件傳播：指瀏覽器決定哪個(gè)對(duì)象觸發(fā)其事件處理程序的過(guò)程。

（5）事件流：指的是從頁(yè)面接收事件的順序，IE的事件流是事件冒泡流，而Netscape?Communication的事件流是事件捕獲流。事件在DOM中傳播的順序有兩種類(lèi)型：事件捕獲和事件冒泡。

（6）DOM2級(jí)事件標(biāo)準(zhǔn)規(guī)定了事件流包括三個(gè)階段：事件捕獲階段，處于目標(biāo)階段，事件冒泡階段。在DOM2級(jí)事件模型中，一旦事件被觸發(fā)，事件流首先從DOM樹(shù)頂部（文檔節(jié)點(diǎn)）向下傳播，直到目標(biāo)節(jié)點(diǎn)，然后再?gòu)哪繕?biāo)節(jié)點(diǎn)向上傳播到DOM樹(shù)頂。從上到下的過(guò)程被稱(chēng)為捕獲階段（該階段包括從文檔到目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)范圍內(nèi)的所有節(jié)點(diǎn)），從下到上的過(guò)程被稱(chēng)為冒泡階段，包括從目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)返回到文檔的行程中遇到的節(jié)點(diǎn)（即就是事件開(kāi)始由文檔中嵌套層次最深的那個(gè)具體的元素節(jié)點(diǎn)接收，然后逐漸向上級(jí)傳播到較不具體的節(jié)點(diǎn)）。如圖

????

?

??第一部分稱(chēng)為捕獲階段，捕獲階段的主要任務(wù)是建立傳播路徑，在冒泡階段，事件會(huì)通過(guò)這個(gè)路徑回溯到文檔跟節(jié)點(diǎn)。第二部分稱(chēng)為目標(biāo)階段，該階段僅包括目標(biāo)節(jié)點(diǎn)（圖中的div節(jié)點(diǎn)），事件在目標(biāo)節(jié)點(diǎn)上被觸發(fā)。第三部分稱(chēng)為冒泡階段，事件在目標(biāo)元素上觸發(fā)后，并不在這個(gè)元素上終止，同一個(gè)事件會(huì)依次在目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)，父節(jié)點(diǎn)的父節(jié)點(diǎn)...直到最外層的節(jié)點(diǎn)上被觸發(fā)。舉一個(gè)例子，來(lái)說(shuō)明事件流的三個(gè)階段：如圖：

??

??????當(dāng)點(diǎn)擊最里層的span元素時(shí)，事件流首先從DOM樹(shù)頂部（文檔節(jié)點(diǎn)）向下傳播，直到目標(biāo)節(jié)點(diǎn)（如上圖例中的span元素），然后再?gòu)哪繕?biāo)節(jié)點(diǎn)向上傳播到DOM樹(shù)頂。從上到下的這個(gè)搜索dom樹(shù)的過(guò)程，就是捕獲階段，而從下到上的span元素被選中，一直彈出對(duì)話框html元素被選中，這就是同一個(gè)事件的冒泡過(guò)程被稱(chēng)為冒泡階段，也就是事件在目標(biāo)元素上觸發(fā)后，并不在這個(gè)元素上終止，會(huì)一直向上冒泡，直到最外層的節(jié)點(diǎn)上。

???不過(guò)，并非每個(gè)事件對(duì)象都參與事件流的所有三個(gè)階段。而對(duì)于事件冒泡，在必要的時(shí)候還是需要相應(yīng)的處理，這兩個(gè)問(wèn)題后期再繼續(xù)學(xué)習(xí)研究。??

（7）事件處理程序（事件監(jiān)聽(tīng)程序）：處理或者響應(yīng)事件的函數(shù)。事件處理程序的名字以”on”開(kāi)開(kāi)頭，比如click事件的處理程序就是onclick,

（8）事件對(duì)象（event）:是與特定事件相關(guān)且包含有關(guān)該事件詳細(xì)信息的對(duì)象。事件對(duì)象作為參數(shù)傳遞給事件處理程序函數(shù)。

轉(zhuǎn)載于:https://blog.51cto.com/xiyin001/1749423

總結(jié)

以上是生活随笔為你收集整理的js 事件学习与总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。