事件冒泡

Code4App 發布于2019-08-20 14:30 / 1009人閱讀

摘要：事件冒泡一個元素接收到事件以后，會把自身接收的所有事件全部傳播給它的父級，直到最頂層。上述的嵌套關系是存在事件冒泡的。

1、事件冒泡：一個元素接收到事件以后，會把自身接收的所有事件全部傳播給它的父級，直到最頂層window。

上述div 的嵌套關系是存在事件冒泡的。無論css如何對上面三個div進行位置的定位。

冒泡機制是默認存在的；

var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
function fn1(){
    alert(this.id);
}
oDiv1.onclick = fn1;//給oDiv1添加了事件處理函數
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;

當點擊div3時，不但會彈出div3 還會有div2 div1.
當oDiv2.onclick = fn1被注釋時，點擊div3，不但會彈出div3 還會有div1 彈出。（這也就是說明，oDiv2.onclick = fn1被注釋之后，div2還是能夠接收到div3傳過來的點擊事件，沒有彈出div2的原因是沒有告訴div2在接收到點擊事件后如何進行處理。例如上面的注釋不能說是給div2 添加事件，應該是給div2 添加了事件處理函數。）

2、冒泡機制的存在即給我們帶了便利也給我們帶來了一些不必要的麻煩。冒泡機制是默認存在的（可能是存在帶來的好處優于帶來麻煩）。

3、阻止事件冒泡：

在當前要阻止冒泡的時間函數中調用：ev.cancelBubble = true;

4、因為事件冒泡要傳到父級，如果想對某些結構進行處理的時候，尤其是嵌套結構，可以想一想事件的冒泡機制。

云服務器 GPU云服務器冒泡事件事件冒泡事件冒泡機制阻止冒泡事件

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

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

JS中事件冒泡與捕獲

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。事件冒泡微軟提出了名為事件冒泡的事件流。事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。考慮下面這段代碼，就不寫html->head,body之類的代碼了，自行腦補 Click me! ...

sixleaves 2019-08-21 10:52 評論0 收藏0
徹底搞懂JS事件冒泡與捕獲

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。如下：假設三層div都...

Half 2019-08-02 15:29 評論0 收藏0
徹底搞懂JS事件冒泡與捕獲

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。如下：假設三層div都...

zhangxiangliang 2019-08-23 18:36 評論0 收藏0
徹底搞懂JS事件冒泡與捕獲

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。如下：假設三層div都...

周國輝 2019-08-30 11:22 評論0 收藏0
JS 中的事件冒泡與捕獲

摘要：在之前是只支持事件冒泡，包括之后和目前主流的瀏覽器都同時支持兩種事件。中可以用來取消事件冒泡。剛接觸 JS 的那個時候，啥也不懂，只想著如何利用 Google、百度到的函數來解決實際的問題，不會想到去一探究竟。漸漸的，對 JS 的語言的不斷深入，有機會去了解一些原理性東西。最近在看 JQuery 源碼，感觸很多，總想著用原生的 JS 去實現自己的一個 JQuery 庫。說實在的，J...

Rindia 2019-08-20 11:40 評論0 收藏0