事件流，事件捕獲與事件冒泡-基礎知識總結------彭記（018）

時間 2019-11-18

原文原文鏈接

事件流：html

-事件流包括三個階段-事件捕獲階段、處於目標階段和事件冒泡階段。瀏覽器

-首先發生的是事件捕獲，爲截獲事件提供了機會，而後是實際的目標接收到事件，最後一個階段是冒泡階段，能夠在這個階段對事件作出響應。ui

事件冒泡：spa

-事件開始時由最具體的元素接收，而後逐級向上傳播到較爲不具體的節點（文檔）。code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="myDiv">Click Me</div>
</body>
</html>

-若是你單擊了頁面中的<div>元素，那麼這個click事件會安裝以下順序傳播：htm

1，<div>對象

2，<body>blog

3，<html>事件

4，document文檔

-也就是說，click事件首先在<div>元素上發生，而這個元素就是咱們單擊的元素，而後，click事件沿DOM樹想上傳播，在每一級節點上都會發生，直至傳播到document對象

-全部現代瀏覽器都支持事件冒泡，但在具體實現上仍是有一些差異，IE5.5及更早版本中的事件冒泡會跳過<html>元素（從<body>直接跳到document），IE九、Firefox、Chrome和Safari則將事件一直冒泡到window對象。

事件冒泡帶來的影響：

-假如前代元素和後代元素都綁定了同類型的事件，當後代元素觸發的時候，同時會冒泡到前代元素上，此時，兩個徹底不一樣的功能有一個元素觸發 -- 不對勁

-解決方式：阻止事件冒泡

-事件對象 -- 谷歌和火狐支持 --- ie8不支持

event.stopPropagation();

-谷歌，ie的方法：

window.event.cancelBubble = true;

事件捕獲:

是不太具體的元素應該更早接受到事件，而最具體的節點應該最後接收到事件。他們的用意是在事件到達目標以前就捕獲它；也就是跟冒泡的過程正好相反，以html的click事件爲例，document對象（DOM級規範要求從document開始傳播，可是如今的瀏覽器是從window對象開始的）最早接收到click事件的而後事件沿着DOM樹依次向下傳播，一直傳播到事件的實際目標

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。