爲什麼要有事件捕獲和事件冒泡?

學習js的事件對象,就會提到事件循環機制和事件處理模型,要知其然更要知其所以然,學起來才能事半功倍。

大概講解一下,損失一點精確性,力求簡單明瞭。

瀏覽器的每個座標點對應一個dom對象(當然這是比喻,實際上是一個dom對象可能佔用一大片地方,它是多個座標點集),就拿hover事件來說,鼠標每次移動一個像素,硬件驅動程序就向操作系統報告一次,這裏忽略操作系統這個中介,把它看成直接報給瀏覽器,畢竟對於前端開發來說,瀏覽器就可以認爲是我們的操作系統。然後瀏覽器根據這個鼠標座標位置,找到對應的dom對象,並運行此對象裏面hover屬性綁定的函數。這是最機械最簡化理解的事件驅動過程(事實上瀏覽器層面肯定對此作了優化)。而瀏覽器找到dom對象並運行其上的綁定函數時,還會創一個event對象扔進事件函數的第一個參數裏供我們使用。

那麼問題來了,因爲同一個像素點會被不同dom包含,而這些dom還往往是父子嵌套關係,那麼點擊這個點,是在點擊父(運行父級dom上的綁定函數)?還是子(運行子級dom上的綁定函數)?還是父子都被點擊(父和子dom上的綁定函數都運行,如果這樣那應該先運行子上的函數還是先運行父上的)?

用不同的方式解決此困惑,就形成了由外而內的捕獲模式和由內而外的冒泡模式。

所以如果在冒泡模式下,想精細化的約束某個事件到子,就可以調用阻止冒泡函數,那麼父就感受不到此事件了。

但我似乎沒有見到有阻止向下捕獲函數,從而將事件約束到父。

如果是沒有父子關係的兩個dom都佔用一個像素點,那就更好處理,分別獨立運行這兩個dom的綁定函數即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章