js事件冒泡和事件捕獲

SimonMa 發(fā)布于2019-08-29 12:33 / 1613人閱讀

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

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

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

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

下面是示例代碼

html代碼：

事件冒泡js代碼：

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

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

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

這個(gè)時(shí)候點(diǎn)擊child元素，控制臺(tái)會(huì)依次彈出child parent，因此事件觸發(fā)的順序是child ->parent，當(dāng)然如果我們希望點(diǎn)擊child元素之后不觸發(fā)parent元素的click事件，也可以用stopPropagation()來阻止事件的冒泡。

事件捕獲js代碼：

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

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

這個(gè)時(shí)候點(diǎn)擊child元素，控制臺(tái)會(huì)依次彈出parent child，因此事件觸發(fā)的順序是parent->child

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

事件委托：

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

html代碼：


    
       item1
       item2
       item3
       item4
       item5

js代碼：

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

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

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

當(dāng)然你會(huì)說我也可以利用循環(huán)遍歷為每個(gè)li都綁定鼠標(biāo)移入移出事件，當(dāng)然這是可以的，但是這樣你的代碼就多了一個(gè)循環(huán)操作，如果循環(huán)多了之后對(duì)性能影響就不可忽略了。
還有就是如果你又動(dòng)態(tài)的增加了一個(gè)

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

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