js事件冒泡和事件捕獲

2i18ns 發布于2019-08-01 16:47 / 974人閱讀

摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理

前段時間開發一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。

事件冒泡：事件從目標子元素向父級元素逐級傳遞（目標div -> 父元素 —> body ->html ->document）
事件捕獲：事件從最頂級元素向目標子元素逐級傳遞（document -> html -> body -> 父級元素 -> 目標div）

我理解的事件捕獲和事件冒泡其實就是瀏覽器事件觸發的兩個階段。
在不支持w3c標準的瀏覽器（IE9以下）中，我們用attachEvent(event, fn)方法綁定一個事件時，fn函數只能在冒泡階段執行且只能在冒泡階段執行。
在支持w3c標準的瀏覽器中，我們用addEventListener(event, fn, useCapture)方法綁定一個事件時，其中的useCapture參數即用來指定fn函數是在捕獲階段執行還是在冒泡階段執行，默認false為冒泡執行，ture為捕獲執行。通常為了兼容老版本的IE瀏覽器（IE以下），我們不設置useCapture參數，或設置成false

下面是示例代碼

html代碼：

事件冒泡js代碼：

var parent = document.getElementById("parent")
var child = document.getElementById("child")

// click事件冒泡時觸發(useCapture參數為false和不加參數時的默認行為)
parent.addEventListener("click", function(e) {
  console.log("parent")
}, false)

child.addEventListener("click", function(e) {
  console.log("child")
  // e.stopPropagation()    // 阻止事件冒泡
}, false)

這個時候點擊child元素，控制臺會依次彈出child parent，因此事件觸發的順序是child ->parent，當然如果我們希望點擊child元素之后不觸發parent元素的click事件，也可以用stopPropagation()來阻止事件的冒泡。

事件捕獲js代碼：

// click事件捕獲時觸發
parent.addEventListener("click", function(e) {
  console.log("parent")
}, true)

child.addEventListener("click", function(e) {
  console.log("child")
}, true)

這個時候點擊child元素，控制臺會依次彈出parent child，因此事件觸發的順序是parent->child

說了那么多，事件冒泡究竟有什么用呢？下面我們就利用事件冒泡原理來實現事件委托

事件委托：

什么是事件委托？事件委托就是原本你要給一個元素綁定某個事件，但是你不直接綁定在這個元素上，而是綁定在與它相關的元素上，但是效果與綁定在這個元素上一樣。這樣做有什么好處呢？下面我們做個小例子，當鼠標移動到li上時改變它的背景顏色，鼠標離開時背景顏色恢復

html代碼：


    
       item1
       item2
       item3
       item4
       item5

js代碼：

var oParent = document.getElementById("parent");
var oItem = oParent.getElementsByTagName("li");

// 給ul綁定鼠標移入事件
oParent.addEventListener("mouseover", function(e) {
  if(e.target.nodeName.toLowerCase() == "li"){
    e.target.style.background = "red";
  }
})

// 給ul綁定鼠標移出事件
oParent.addEventListener("mouseout", function(e) {
  if(e.target.nodeName.toLowerCase() == "li"){
    e.target.style.background = "";
  }
})

當然你會說我也可以利用循環遍歷為每個li都綁定鼠標移入移出事件，當然這是可以的，但是這樣你的代碼就多了一個循環操作，如果循環多了之后對性能影響就不可忽略了。
還有就是如果你又動態的增加了一個

標簽，那么你又不得不為這個li標簽多帶帶綁定事件，而采用事件委托這些煩惱都可以省略。

本文參考文章：
js之事件冒泡詳解 http://www.jb51.net/article/4...
事件委托及其原理 http://www.cnblogs.com/dearxi...

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

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

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

JS中事件冒泡與捕獲

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

sixleaves 2019-08-21 10:52 評論0 收藏0
JS 中的事件冒泡與捕獲

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

Rindia 2019-08-20 11:40 評論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