DOM · 前端筆記

[TOC] # DOM ## 級別 ### DOM0 ~~~ element.onclick = function{} ~~~ ### DOM2 ~~~ element.addEventListener('click', function(){}, false) ~~~ ### DOM3 ~~~ element.addEventListener('keyup', function(){}, false) ~~~ <br><br> ## 事件模型 ### 冒泡型事件流事件的傳播是從最特定的事件目標到最不特定的事件目標。即從DOM樹的葉子到根。**【推薦】** ![](https://box.kancloud.cn/1e2c978adabe8e092b7c1dbec64fa142_435x368.png) ### 捕獲型事件流事件的傳播是從最不特定的事件目標到最特定的事件目標。即從DOM樹的根到葉子。 ![](https://box.kancloud.cn/96f1b1f56bb418a0d1f22bca21ee31f4_394x324.png) **注意：** * 所有現代瀏覽器都支持事件冒泡，但在具體實現中略有差別： * IE5.5及更早版本中事件冒泡會跳過<html>元素(從body直接跳到document)。 * IE9、Firefox、Chrome、和Safari則將事件一直冒泡到window對象。 * IE9、Firefox、Chrome、Opera、和Safari都支持事件捕獲。盡管DOM標準要求事件應該從document對象開始傳播，但這些瀏覽器都是從window對象開始捕獲事件的。 * 由于老版本瀏覽器不支持，很少有人使用事件捕獲。建議使用事件冒泡。 <br><br> ## 事件流 DOM標準采用捕獲+冒泡。兩種事件流都會觸發DOM的所有對象，從document對象開始，也在document對象結束。 ![](https://box.kancloud.cn/100194f6e5adb11ee38787ca8fce78b4_506x307.png) DOM標準規定事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。 * 捕獲階段：實際目標（`<div>`）在捕獲階段不會接收事件。 * 處于目標階段：事件在`<div>`上發生并處理。但是事件處理會被看成是冒泡階段的一部分。 * 冒泡階段：與捕獲階段相反 **注意：** * 盡管“DOM2級事件”標準規范明確規定事件捕獲階段不會涉及事件目標，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都會在捕獲階段觸發事件對象上的事件。結果，就是有兩次機會在目標對象上面操作事件。 * 并非所有的事件都會經過冒泡階段。所有的事件都要經過捕獲階段和處于目標階段，但是有些事件會跳過冒泡階段：如，focus事件和blur事件。 ## 事件捕獲的具體流程 `window` -> `document` -> `html` -> `body` -> ... -> 目標元素 <br><br> ## Event對象的常見應用 ### event.preventDefault() 阻止默認行為 ### event.stopPropagation() 阻止冒泡 ### event.stopImmediatePropagation() 如果有多個相同類型事件的事件監聽函數綁定到同一個元素，當該類型的事件觸發時，它們會按照被添加的順序執行。如果其中某個監聽函數執行了 event.stopImmediatePropagation() 方法，則當前元素剩下的監聽函數將不會被執行。 ### event.currentTarget 返回綁定事件的元素 ### event.target 返回觸發事件的元素 ### return false 當你每次調用”return false“的時候，它實際上做了3件事情： * event.preventDefault(); * event.stopPropagation(); * 停止回調函數執行并立即返回。 <br><br> ## 自定義事件 ~~~ var element = document.querySelector('.inner') var event = new Event('custom') element.addEventListener('custom', function (){ console.log(1) }, false) element.dispatchEvent(event) ~~~