事件的捕獲、冒泡、委託

原聲JavaScript中，事件是不可缺少的，HTML就是通過事件才能與JavaScript進行互動。其實事件流就是當你點選一個按鈕的時候，這個按鈕是在HTML和body上的，自然的，點選按鈕的時候相當於點選了HTML和body，如果按鈕放在一個div裡面，那麼點選按鈕的時候相當於點選了div,這樣就會出發一系列的事件，這就是事件流。事件具有冒泡流和捕獲流，兩者剛好是反著來。

JavaScript原聲監聽事件addEventListener，接收兩個引數，一個是方法，一個是布林值，指定事件是否在捕獲或冒泡階段執行。所以我們可以很直觀的列印輸出事件的冒泡和捕獲兩個過程。

輸出順序是body 捕獲、test 捕獲、test 冒泡、body 冒泡。

由此可以看出，事件都是從最外層開始捕獲，層層遞進，然後找到目標函式，也就是button所在位置，然後開始層層往外冒泡。

當我們增加了目標函式的點選事件，那麼事件就不會遵守先發生捕獲後再發生冒泡這一規則

輸出順序是body 捕獲、test onclick 、test 冒泡、test 捕獲、body 冒泡，但是事件還是需要遵循外層事件捕獲了，目標函式才能執行。如果我在body捕獲階段就阻止了事件流，那麼目標函式是不會執行的。

只輸出body 捕獲。

stopPropagation既可以阻止事件的捕獲還能阻止事件的冒泡，如果我在test冒泡阻止了事件的冒泡，那麼就不會輸出body冒泡。

事件委託是什麼，我相信很多用jQuery新增元素的時候（append）,，都遇見過新增的元素點選事件無法響應，其實這就是事件的委託。我們一般會用on方法或者繫結在body上面來達到append的元素的點選方法可以執行。一般我們給li新增點選事件是這樣的

但其實我們可以用事件委託

這就是事件委託，事件委託好處就是新增進來的元素也能繫結事件。

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

歡迎關注 Coding 個人筆記 公眾號