1. 程式人生 > >【摘錄自MDN】對事件冒泡和捕捉的解釋

【摘錄自MDN】對事件冒泡和捕捉的解釋

情況 dev 默認 https code demo pen click 情況下

當一個事件觸發了一個有父元素的元素(例如我們的<video>時),現代瀏覽器運行兩個不同的階段 - 捕獲階段和冒泡階段。

在捕獲階段:

  • 瀏覽器檢查元素的最外層祖先(<html>)是否在捕獲階段中註冊了一個onclick事件處理程序,如果是,則運行它。
  • 然後,它移動到<html>中的下一個元素,並執行相同的操作,然後是下一個元素,依此類推,直到到達實際點擊的元素。

在冒泡階段,恰恰相反:

  • 瀏覽器檢查實際點擊的元素是否在冒泡階段中註冊了一個onclick事件處理程序,如果是,則運行它
  • 然後它移動到下一個直接的祖先元素,並做同樣的事情,然後是下一個,等等,直到它到達<html>
    元素。

技術分享圖片

在現代瀏覽器中,默認情況下,所有事件處理程序都在冒泡階段進行註冊。

【摘錄自MDN】對事件冒泡和捕捉的解釋