DOM事件模型

codergarden 發布于2019-08-22 18:03 / 1157人閱讀

摘要：事件模型歷史標準沒有對事件進行修訂所以事件模型的標準就是制定的標準規定了事件捕獲事件冒泡事件取消和知識點在的屬性中使用時要加括號在的中給點擊事件賦值不加括號寫在里相當于字符串里的代碼是執行意思是執行這個這個代碼意思是執行在里為一個函數返回類

DOM事件模型 1.歷史

2.DOM level2 標準

DOM level3沒有對事件進行修訂,所以DOM事件模型的標準就是DOM level2 制定的標準
規定了
事件捕獲event capture
事件冒泡event bubbling
事件取消event cancelation

3.DOM level 0和1知識點

在html的onclick屬性中,使用時要加括號,
在js的onclick中,給點擊事件賦值,不加括號.

寫在html里,相當于eval()字符串里的代碼(eval是執行),eval("print")意思是執行這個print這個代碼,eval("print()")意思是執行print().

在js里,print 為一個函數,返回類型也為函數,賦值的時候,就是把函數這個類型賦給onclick,而print()返回類型為undefined.

4.DOM level 2知識點 4.1在L1中,事件屬性

在DOM level1中,onclick只是一個屬性,可以被覆蓋,所以一個元素只能有一個onclick時事件

4.2在L2中,事件監聽隊列

事件監聽隊列,xxx有用一個隊列,是eventListeners事件監聽隊列,先添加的先觸發

先進先出,先綁定的先觸發,可以綁定多個相同的事件
每一個事件都有一個自己的隊列,click有click的隊列mouseenter有他自己的隊列

也可以移出隊列

也可以只觸發一次

相當于jQuery中的one

總結:

4.3DOM level 2中的兩個階段

總結:

如果不傳送參數()默認,或者傳輸false,那么就從內到外.

如果傳true,從外到內
跟代碼順序沒有關系,如果堅挺的是同一個元素,才跟代碼順序有關系

4.4 觸發順序總結:捕獲與冒泡階段

執行順序就是先從左,往下,再從底,往右上,如果不寫第三個參數或者第三個參數為false,那么函數就只在右邊,執行順序就是fn3,fn2,fn1.

如果把參數改為true,那么函數會跑到左邊,執行順序發生改變:
如下圖

所以分為兩個階段

從上到下,捕獲階段

從下到上,冒泡階段

事件模型就是先捕獲,再冒泡.
執行順序就是先捕獲再冒泡,看他在不活的路上還是冒泡的路上

4.5考點,如果一個元素同時有捕獲和冒泡,即第三個參數有事false,又是true

特例:

如果這個元素是最底層的元素(是嵌套的里面嘴內部的元素),那么不管是捕獲還是冒泡,先寫的先執行.如圖:

(一般沒人會選用兩個階段來用),
要么左邊要么右邊

例子:popover(浮層)點擊別的地方,浮層消失

GPU云服務器云服務器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95447.html

前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

zhichangterry 2019-08-22 11:06 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

Songlcy 2019-08-01 17:36 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

ThreeWords 2019-08-29 13:26 評論0 收藏0
溫故js系列（10）-事件event

摘要：當用戶選擇文本框或中的一個或多個字符觸發。當文本框或內容改變且失去焦點后觸發。事件對象事件對象就是對象，通過處理函數傳遞。比如右擊文本框輸入區域，會彈出系統菜單點擊超鏈接會跳轉到指定頁面點擊提交按鈕會提交數據。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 評論0 收藏0
原生JavaScript事件詳解

摘要：事件通過和管理，當然，這是標準。最后一個參數是布爾型，代表捕獲事件，代表冒泡事件。事件類型，布爾值，這個必須和注冊事件時的類型一致。也就是說，名稱回調類型，三者共同決定解除哪個事件，缺一不可。 JQuery這種Write Less Do More的框架，用多了難免會對原生js眼高手低。小菜其實不想寫這篇博客，貌似很初級的樣子，但是看到網絡上連原生js事件綁定和解除都說不明白，還是決...

_ang 2019-08-21 12:37 評論0 收藏0