摘要:事件冒泡事件捕獲事件委托事件冒泡事件捕獲二者聯系與區別聯系都是事件觸發時序問題的術語。綁定事件方法的第三個參數是控制事件觸發順序的,默認為,即事件冒泡若為即事件捕獲。
事件冒泡 、事件捕獲 、 事件委托 1、事件冒泡 、事件捕獲 二者聯系與區別
聯系:
(1)、都是 事件觸發時序問題 的術語。 (2)、綁定事件方法(addEventListener)的第三個參數是控制事件觸發順序的,默認為false,即事件冒泡;若為true,即事件捕獲。
區別:
(1)、事件冒泡: 從觸發事件的那個節點一直到document,是自下而上的去觸發事件。 (2)、事件捕獲: 從document到觸發事件的那個節點,即自上而下的去觸發事件。2、事件冒泡
(1)、冒泡事件圖示:
//結果: 點擊father輸出結果: 這是父親=>father 點擊son輸出結果: 這是兒子=>son 這是父親=>father (事件冒泡:先son,后father)事件測試
(2)、上述代碼采用的事件冒泡機制:
1.當點擊son元素時,先觸發son的點擊事件,再觸發father的點擊事件,打印相應的內容;
2.當點擊father元素時,只觸發father的點擊事件,因為father元素冒泡上去沒有dom元素設置了click事件的函數
(3)、阻止事件冒泡
e.stopPropagation();3、事件捕獲
事件捕獲圖示:
//結果: 點擊father輸出結果: 這是父親=>father 點擊son輸出結果: 這是父親=>father 這是兒子=>son (事件捕獲:先father,后son)
上述代碼采用事件捕捉機制:4、事件委托
1.當點擊son元素時,先觸發father的點擊事件,再觸發son的點擊事件,打印相應的內容;
2.當點擊father元素時,只觸發father的點擊事件,因為father元素從上面捕捉下來一直到father元素沒有dom元素設置了click事件的函數;
(1)、定義
事件委托:利用事件冒泡的原理。
(2)、使用情況: 當有多個類似元素需要綁定事件時,一個一個去綁定既浪費時間,又不利于性能,這時候可以使用事件委托,給他們的一個共同父級元素添加一個事件函數去處理他
們所有的事件情況,代碼如下:
注意:hover事件不能使用事件委托方式。
(3)、雖然上述例子中沒有給li添加點擊事件,為什么點擊相應的li會產生效果,我們可以理解為:雖然我們沒有給li設置點擊事件,但是默認的點擊事件是采用的時間冒泡,冒泡到父
級元素的點擊事件是用事件的target屬性判斷進行點擊的元素
e.target 表示在事件冒泡中觸發事件的源元素。
并且e.target有很多屬性可操作:
- e.target.nodeName //獲取事件觸發元素標簽的name - e.target.id //獲取事件觸發元素的id - e.target.className //獲取事件觸發元素的className - e.target.innerHTML //獲取事件觸發元素的內容
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96044.html
摘要:事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流事件發生順序的問題。事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流(事件發生順序)的問題。考慮下面這段代碼,就不寫html->head,body之類的代碼了,自行腦補 Click me! ...
摘要:在之前是只支持事件冒泡,包括之后和目前主流的瀏覽器都同時支持兩種事件。中可以用來取消事件冒泡。 剛接觸 JS 的那個時候,啥也不懂,只想著如何利用 Google、百度到的函數來解決實際的問題,不會想到去一探究竟。 漸漸的,對 JS 的語言的不斷深入,有機會去了解一些原理性東西。最近在看 JQuery 源碼,感觸很多,總想著用原生的 JS 去實現自己的一個 JQuery 庫。說實在的,J...
摘要:事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽,這時我們點擊的小的藍方框,事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流(事件發生順序)的問題。 如下:假設三層div都...
摘要:事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽,這時我們點擊的小的藍方框,事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流(事件發生順序)的問題。 如下:假設三層div都...
摘要:事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽,這時我們點擊的小的藍方框,事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流(事件發生順序)的問題。 如下:假設三層div都...
閱讀 1226·2023-04-25 15:53
閱讀 2101·2021-11-19 09:40
閱讀 3488·2021-10-11 10:59
閱讀 2066·2019-08-30 15:55
閱讀 1955·2019-08-30 15:54
閱讀 2293·2019-08-29 13:03
閱讀 2754·2019-08-28 18:17
閱讀 1510·2019-08-27 10:51