原聲JavaScript中,事件是不可缺少的,HTML就是通過事件才能與JavaScript進行互動。其實事件流就是當你點選一個按鈕的時候,這個按鈕是在HTML和body上的,自然的,點選按鈕的時候相當於點選了HTML和body,如果按鈕放在一個div裡面,那麼點選按鈕的時候相當於點選了div,這樣就會出發一系列的事件,這就是事件流。事件具有冒泡流和捕獲流,兩者剛好是反著來。
JavaScript原聲監聽事件addEventListener,接收兩個引數,一個是方法,一個是布林值,指定事件是否在捕獲或冒泡階段執行。所以我們可以很直觀的列印輸出事件的冒泡和捕獲兩個過程。

由此可以看出,事件都是從最外層開始捕獲,層層遞進,然後找到目標函式,也就是button所在位置,然後開始層層往外冒泡。
當我們增加了目標函式的點選事件,那麼事件就不會遵守先發生捕獲後再發生冒泡這一規則


stopPropagation既可以阻止事件的捕獲還能阻止事件的冒泡,如果我在test冒泡阻止了事件的冒泡,那麼就不會輸出body冒泡。
事件委託是什麼,我相信很多用jQuery新增元素的時候(append),,都遇見過新增的元素點選事件無法響應,其實這就是事件的委託。我們一般會用on方法或者繫結在body上面來達到append的元素的點選方法可以執行。一般我們給li新增點選事件是這樣的


對於事件,在事件捕獲或者事件冒泡階段處理並沒有明顯的優劣之分,但是由於事件冒泡被所有主流的瀏覽器相容,從相容性角度來說還是建議大家使用事件冒泡模型。這就是事件的捕獲、冒泡、委託。
歡迎關注 Coding 個人筆記 公眾號