js如何實(shí)現(xiàn)捕獲與冒泡機(jī)制

發(fā)布時(shí)間：2020-07-22 15:55:19 來(lái)源：億速云閱讀：331 作者：小豬欄目：web開(kāi)發(fā)

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

先從事件綁定機(jī)制說(shuō)起, 事件綁定機(jī)制通過(guò)綁定方法addEventListener()實(shí)現(xiàn),

語(yǔ)法格式如下:

element.addEventListener(event, function, useCapture)

參數(shù)值

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

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

所以什么是捕獲和冒泡?

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

DOM事件模型將事件傳播過(guò)程分為兩個(gè)階段: 捕獲階段和冒泡階段

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

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

js如何實(shí)現(xiàn)捕獲與冒泡機(jī)制

這里舉個(gè)簡(jiǎn)單的例子:

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <div id="父級(jí)">
 <div id="兒子">
  <div id="孫子" >
  </div>
 </div>
 </div>
</body>
<script type="text/javascript">
 var a = document.getElementById('父級(jí)'),
 b = document.getElementById('兒子'),
 c = document.getElementById('孫子');
 a.addEventListener("click",show, true);
 b.addEventListener("click",show, true);
 c.addEventListener("click",show, true);
 console.log("前3為捕獲,后三個(gè)為冒泡");
 a.addEventListener("click",show, false);
 b.addEventListener("click",show, false);
 c.addEventListener("click",show, false);
 function show(even){ console.log(this.id); }
</script>
</html>

js如何實(shí)現(xiàn)捕獲與冒泡機(jī)制

其中兩條孫子輸出相同被折疊了, 可以看到前三個(gè)是以捕獲順序, 第三個(gè)參數(shù)為true, 順序是從父親到孫子

后三個(gè)為false意思是冒泡順序, 順序是孫子到父級(jí),即從內(nèi)到外

實(shí)際上捕獲和冒泡時(shí)最外層和的元素并不是父級(jí)div,

捕獲時(shí)實(shí)際上是:

document-->html-->body-->父級(jí)div-->兒子div-->孫子div

冒泡時(shí)相反, 只不過(guò)body及以上沒(méi)添加事件并輸出, 所以在例子中沒(méi)顯現(xiàn)出來(lái)

所以用冒泡還是捕獲？

　　對(duì)于事件代理來(lái)說(shuō)，在事件捕獲或者事件冒泡階段處理并沒(méi)有明顯的優(yōu)劣之分，但是由于事件冒泡的事件流模型被所有主流的瀏覽器兼容，從兼容性角度來(lái)說(shuō)還是建議大家使用事件冒泡模型。

以上就是關(guān)于js如何實(shí)現(xiàn)捕獲與冒泡機(jī)制的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

js如何實(shí)現(xiàn)捕獲與冒泡機(jī)制

語(yǔ)法格式如下:

參數(shù)值

所以什么是 捕獲和冒泡&#63;

所以用冒泡還是捕獲？

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

所以什么是捕獲和冒泡?