1. 程式人生 > >事件流,事件捕獲與事件冒泡-基礎知識總結------彭記(018)

事件流,事件捕獲與事件冒泡-基礎知識總結------彭記(018)

sca ie9 com pre 類型 har code 做出 viewport

事件流:

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

-首先發生的是事件捕獲,為截獲事件提供了機會,然後是實際的目標接收到事件,最後一個階段是冒泡階段,可以在這個階段對事件做出響應。

事件冒泡

-事件開始時由最具體的元素接收,然後逐級向上傳播到較為不具體的節點(文檔)

<!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事件會安裝如下順序傳播:

1,<div>

2,<body>

3,<html>

4,document

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

-所有現代瀏覽器都支持事件冒泡,但在具體實現上還是有一些差別,IE5.5及更早版本中的事件冒泡會跳過<html>元素(從<body>直接跳到document),IE9、Firefox、Chrome和Safari則將事件一直冒泡到window對象。

事件冒泡帶來的影響: -假如前代元素和後代元素都綁定了同類型的事件,當後代元素觸發的時候,同時會冒泡到前代元素上,此時,兩個完全不同的功能有一個元素觸發 -- 不對勁 -解決方式:阻止事件冒泡
-事件對象 -- 谷歌和火狐支持 --- ie8不支持 event.stopPropagation(); -谷歌,ie的方法: window.event.cancelBubble = true;

事件捕獲:

是不太具體的元素應該更早接受到事件,而最具體的節點應該最後接收到事件。他們的用意是在事件到達目標之前就捕獲它;也就是跟冒泡的過程正好相反,以html的click事件為例,document對象(DOM級規範要求從document開始傳播,但是現在的瀏覽器是從window對象開始的)最先接收到click事件的然後事件沿著DOM樹依次向下傳播,一直傳播到事件的實際目標

事件流,事件捕獲與事件冒泡-基礎知識總結------彭記(018)