這篇文章主要為大家展示了js如何實現(xiàn)捕獲與冒泡機制，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)肥東免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

先從事件綁定機制說起, 事件綁定機制通過綁定方法addEventListener()實現(xiàn),

語法格式如下:

element.addEventListener(event, function, useCapture)

參數(shù)值

參數(shù)	描述
event	必須。字符串，指定事件名。            注意: 不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。             提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對象參考手冊。
function	必須。指定要事件觸發(fā)時執(zhí)行的函數(shù)。             當(dāng)事件對象會作為第一個參數(shù)傳入函數(shù)。 事件對象的類型取決于特定的事件。例如， "click" 事件屬于 MouseEvent(鼠標事件) 對象。
useCapture	可選。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行。            可能值: true - 事件句柄在捕獲階段執(zhí)行 false- false- 默認。事件句柄在冒泡階段執(zhí)行

我們可以看到第三個參數(shù)是布爾值, true表示在捕獲階段執(zhí)行, 而false指在冒泡階段執(zhí)行

所以什么是 捕獲和冒泡?

捕獲(capture)和冒泡(bubble)是事件傳播過程中的兩個概念, 比如用戶單擊某個元素, 但由于元素處于父元素內(nèi), 該父元素又處于document對象中, document對象又處于window對象中, 因此該單擊事件實際發(fā)生在該元素, 父元素, document, window對象上, 而事件傳播過程就是瀏覽器決定依次觸發(fā)哪個對象的事件處理函數(shù)的過程.

DOM事件模型將事件傳播過程分為兩個階段: 捕獲階段和冒泡階段

在事件捕獲階段, 事件從最頂級的父元素逐層向內(nèi)傳遞,

在冒泡階段, 事件從事件發(fā)生的直接元素 , 逐層向父元素傳遞

這里舉個簡單的例子:

點擊孫子元素, 給body中的元素都添加點擊事件并輸出觸發(fā)事件的對象id:

新聞標題：js如何實現(xiàn)捕獲與冒泡機制-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/dihcjd.html