摘要：目標階段事件對象到達事件對象的事件目標。如果事件類型指示事件不冒泡，則事件對象將在完成此階段之后停止。氣泡階段事件對象以相反順序傳播目標的祖先，從的父對象開始，并以窗口結束。涉及到事件委托時這兩個所指的元素才會不一樣參考等級概述事件流
DOM
DOM(Document Object Model) 全稱文檔對象模型. 文檔可以是HTML, XML, 或者XHTML文檔.DOM定義 的是一組與平臺和語言的接口. 目前形成了三個演進的標準, DOM Level 1, DOM Level 2, DOM Level 3. 每個新的Level都是在原有的基礎之上增加了新的接口.
可以看到, 在DOM level 2里引入了事件, 主要有EventTarget, Mouse等接口. DOM level 2里主要引入了鍵盤事件.
Event事件流
監聽器 target.addEventListener(type, listener[, useCapture])的第三個參數useCapture, 類型為布爾, 默認為false,表示事件觸發使用冒泡流. 先觸發內層元素的監聽器, 再觸發外層元素的監聽器. useCapture取值為true時, 將先觸發外層元素的監聽器, 再觸發內層元素的監聽器.
根據DOM2級事件規定
共有三個事件階段：捕獲階段、目標階段和氣泡階段。如在 dispatch之前調用stopPropagation() , 則將跳過所有階段
捕獲階段：事件對象通過目標的祖先從窗口傳播到目標的父對象。這個階段也被稱為捕獲階段。
目標階段：事件對象(event object)到達事件對象的事件目標(event target)。這個階段也被稱為at-target階段。如果事件類型指示事件不冒泡，則事件對象將在完成此階段之后停止。
氣泡階段：事件對象以相反順序傳播目標的祖先，從event target的父對象開始，并以窗口結束。這個階段也稱為冒泡階段。
配合代碼理解. 此處我們點擊的
Document
如果我們點擊btn,也可以視為同時點擊了btn的容器元素, 甚至單擊了整個頁面. 因為我們于每一級元素都添加了監聽器, 控制臺打印結果如下.
Event相關易混淆關鍵詞
eventTarget / event.Target
能用addEventListener方法添加事件監聽器的對象都是eventTarget.
Element，document 和 window 是最常見的eventTarget.
event.target, 是觸發當前事件的最小單位元素.
event.currentTarget / event.Target
event.target返回觸發事件的元素;event.currentTarget返回綁定事件的元素
具體的說就是event.currentTarget是注冊事件時所指向的元素，而event.target是響應事件的最小子元素，也就是最深層級的觸發事件的元素。
涉及到事件委托時, 這兩個所指的元素才會不一樣.
參考:
https://www.cnblogs.com/johnn... DOM等級概述
https://www.w3.org/TR/DOM-Lev... W3C事件流
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96192.html
-
摘要：事件流指的是從頁面接收事件的順序。級事件規定方法的第三個參數設為，表示事件在捕獲階段觸發。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據級事件規定，事件流應該包括三個階段，事件捕獲階段，處于目標階段和事件冒泡階段。
什么是事件？（敲黑板）
事件，就是文檔或瀏覽器窗口發生的一些特定的交互瞬間。（by 《JavaScript高級程序設計》）比如鼠標點擊，雙擊，滾動條滑動...
什么是事件...
-
摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。
本文主要解決兩個問題：
什么是事件流
DOM事件流的三個階段
起因
在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...
-
摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。
本文主要解決兩個問題：
什么是事件流
DOM事件流的三個階段
起因
在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...
-
摘要：但對于整個事件流上的別的元素來說，執行順序還會受到另外一個因素的影響。以上面的場景為例，在捕獲階段執行的事件，如果執行，則事件流終止，不會到達目標階段，的世界則不會被執行執行結果為線上參考事件流
向dom綁定事件的事件的三種方式
行內綁定
按鈕
js內綁定
btnDom.onclick = function clickHandler() {
console.log(click)...
Anleb
評論0
收藏0
-
摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。更新無需重新綁定事件處理器，因為事件代理對不同子元素可采用不同處理方法。
首先我們思考一個很有意思的事情：一張紙上畫了兩個同心圓，當我們把手指放到圓心上時，手指指向的不是一個圓，而是紙上的兩個圓，同理之，當我們單擊網頁上的一個div...
-
摘要：處于目標階段事件在上發生并處理。冒泡階段事件又傳播回文檔。不支持捕獲事件的。總結二使用事件委托新添加的元素還會有之前的事件。事件對象在觸發某個事件時，會產生一個事件對象。
js 是采用異步事件驅動的機制來響應用戶操作的，也就是說當用戶對某個html元素進行操作的時候，會產生一個事件，該事件會驅動某些函數來處理。事件源：產生事件的地方（html元素，窗口，其他等等)；事件：鼠標事件，鍵盤...
