事件流,事件捕獲與事件冒泡-基礎知識總結------彭記(018)
阿新 • • 發佈:2017-09-04
sca ie9 com pre 類型 har code 做出 viewport
-事件對象 -- 谷歌和火狐支持 --- ie8不支持
event.stopPropagation();
-谷歌,ie的方法:
window.event.cancelBubble = true;
事件流:
-事件流包括三個階段-事件捕獲階段、處於目標階段和事件冒泡階段。
-首先發生的是事件捕獲,為截獲事件提供了機會,然後是實際的目標接收到事件,最後一個階段是冒泡階段,可以在這個階段對事件做出響應。
事件冒泡:
-事件開始時由最具體的元素接收,然後逐級向上傳播到較為不具體的節點(文檔)。
<!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對象。
事件冒泡帶來的影響: -假如前代元素和後代元素都綁定了同類型的事件,當後代元素觸發的時候,同時會冒泡到前代元素上,此時,兩個完全不同的功能有一個元素觸發 -- 不對勁 -解決方式:阻止事件冒泡事件捕獲:
是不太具體的元素應該更早接受到事件,而最具體的節點應該最後接收到事件。他們的用意是在事件到達目標之前就捕獲它;也就是跟冒泡的過程正好相反,以html的click事件為例,document對象(DOM級規範要求從document開始傳播,但是現在的瀏覽器是從window對象開始的)最先接收到click事件的然後事件沿著DOM樹依次向下傳播,一直傳播到事件的實際目標
事件流,事件捕獲與事件冒泡-基礎知識總結------彭記(018)