摘要:為什么要弄清楚事件捕獲和冒泡以及事件委托一面試必問的問題二在過去糟糕的日子里,瀏覽器的兼容性比現在要小得多,網景只使用事件捕獲,而只使用事件冒泡。
為什么要弄清楚事件捕獲和冒泡以及事件委托
一、面試必問的問題三者的關系是怎樣的呢
二、在過去糟糕的日子里,瀏覽器的兼容性比現在要小得多,Netscape(網景)只使用事件捕獲,而Internet Explorer只使用事件冒泡。當W3C決定嘗試規范這些行為并達成共識時,他們最終得到了包括這兩種情況(捕捉和冒泡)的系統,最終被應用在現在瀏覽器里。
三、容易把事件委托理解為多帶帶的執行階段
一、事件捕獲和冒泡是現代瀏覽器的執行事件的兩個不同階段事件冒泡和捕獲的運行圖
二、事件委托是利用冒泡階段的運行機制來實現的
運行條件:當一個事件發生在具有父元素的的元素上時,現代瀏覽器根據事件添加時的設置來執行(冒泡或者捕獲)
通過 addEventListener() 的第三個屬性來設置事件是通過捕獲階段注冊的(true),還是冒泡階段注冊的(false)。默認情況下是false。
事件冒泡從實際操作的元素(事件)向上級父元素一級一級執行下去,直到達到
有些時候父元素和子元素都定義了click事件,但是不希望點擊子元素的時候執行父元素的click事件(例如dialog彈窗的遮罩層如果是父元素,而dialog彈窗內容層是子元素,同時可以通過點擊遮罩層來關閉彈窗,但是點擊內容層不關閉彈窗),可以通過stopPropagation()在子元素上阻止冒泡。事件捕獲(一般不會用到)
瀏覽器檢查元素的最外層祖先,是否在捕獲階段中注冊了一個onclick事件處理程序,如果是,則運行它。事件捕獲和冒泡的區別
然后,它移動到中的下一個元素(點擊的元素的父元素),并執行相同的操作,然后是下一個元素(點擊的元素的父元素),依此類推,直到到達實際點擊的元素。
執行順序的不同
冒泡:
捕獲:
如果你想要在大量子元素(包括動態添加的)中單擊任何一個就可以運行一段代碼,這個時候可以把事件監聽器設置在父節點上。
實現方式 jquery 中的 on
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51868.html
摘要:為什么要弄清楚事件捕獲和冒泡以及事件委托一面試必問的問題二在過去糟糕的日子里,瀏覽器的兼容性比現在要小得多,網景只使用事件捕獲,而只使用事件冒泡。 為什么要弄清楚事件捕獲和冒泡以及事件委托 一、面試必問的問題二、在過去糟糕的日子里,瀏覽器的兼容性比現在要小得多,Netscape(網景)只使用事件捕獲,而Internet Explorer只使用事件冒泡。當W3C決定嘗試規范這些行為并達成...
摘要:事件冒泡事件捕獲事件委托事件冒泡事件捕獲二者聯系與區別聯系都是事件觸發時序問題的術語。綁定事件方法的第三個參數是控制事件觸發順序的,默認為,即事件冒泡若為即事件捕獲。 事件冒泡 、事件捕獲 、 事件委托 1、事件冒泡 、事件捕獲 二者聯系與區別 聯系: (1)、都是 事件觸發時序問題 的術語。 (2)、綁定事件方法(addEventListener)的第三個參數是控制事件觸發順序的,默...
摘要:而事件分為個級別級事件處理程序,級事件處理程序和級事件處理程序。級中沒有規范事件的相關內容,所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現用戶與WEB網頁之間的動態交互,接收用戶操作并做出相應的反饋,而事件在此間則充當橋梁的重要角色。 日常開發中,經常會...
摘要:查閱了一些資料之后才知道原來這就是事件冒泡,下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理 前段時間開發一個小項目的時候遇到一個問題,即給一個元素以及它的父元素綁定了click事件,這個時候我點擊這個元素時,父級元素的clik事件也會觸發,這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡,下面是我對事件冒泡和事件捕獲的理解。 事件冒泡:事件從...
閱讀 5257·2021-09-22 15:50
閱讀 1862·2021-09-02 15:15
閱讀 1164·2019-08-29 12:49
閱讀 2543·2019-08-26 13:31
閱讀 3458·2019-08-26 12:09
閱讀 1210·2019-08-23 18:17
閱讀 2736·2019-08-23 17:56
閱讀 2929·2019-08-23 16:02