JavaScript中冒泡型事件和捕獲型事件區別是什麼?

事件是JavaScript最顯著的特徵,因為它提供了一個平臺,讓用戶不僅可以瀏覽頁面中的內容,而且能夠跟頁面進行交互,今天主要給大家講解一下JavaScript中常見的事件流。

什麼是事件流?

瀏覽器最初開始支持事件時,同一個事件僅僅只有一個元素相應。後來認為僅僅支持一個單一事件是不夠的,而IE4之後提出了事件流的概念,一個元素可以支持多個事件。常見的事件流有冒泡型事件和捕捉型事件。

冒泡型事件

冒泡型事件指的是事件按照從最特定的事件目標到最不特定事件目標順序逐一觸發,代碼如下:

JavaScript中冒泡型事件和捕獲型事件區別是什麼?

p標籤、div標籤、body標籤都添加了onclick事件,觸發了add()函數,單擊鼠標時觸發了事件,會發現3個onclick函數都觸發了,觸發的順序是p標籤、div標籤、最後的body標籤。冒泡型事件像冒泡一樣從DOM層次結構的最低端往上一級級上升,p-div-body-document。給大家留個作業如果上面代碼添加了,會出現什麼樣的結果。

JavaScript中冒泡型事件和捕獲型事件區別是什麼?

捕獲型事件

捕獲型事件和冒泡型事件是相反的,從不精確的對象到最精準的對象。這種事件也稱作自頂向下事件模型,因為它是從DOM層次的頂端開始向下延伸的。需要注意的是IE瀏覽器不支持這種類型事件,我們只需要瞭解即可。如果設置了捕獲型事件,前面的例子會反向進行。

關於“JavaScript事件流”先聊到這。每天學習一個知識點,每日寄語-“沒有特別幸運,那麼請先特別努力”如轉載清標明出處。


分享到:


相關文章: