事件流：捕獲 目標 冒泡

這兩天在開發相似「有贊「編輯商鋪頁面的功能。鼠標懸浮到某個組件，出現」添加「組件的按鈕，點擊該按鈕在右側區域出現可供選擇的基礎組件模塊；而鼠標點擊某個組件，右側區域則出現對該組件的操做面板。由於操做區都在右側，因此基礎組件模塊和對組件的操做面板不能重疊出現。即點擊組件在右側區域出現操做面板，要隱藏可能存在的基礎組件模塊。

dom結構以下：

.component // 組件 -- 點擊它，右側出現該組件的操做面板
 	.show
     	.top-add //在該組件的上方添加組件 -- 點擊它，右側出現基礎組件選擇模塊
         .bottom-add // 在該組件的下方添加組件 -- 點擊它，右側出現基礎組件選擇模塊
         .remove //刪除該組件
複製代碼

從dom結構能夠看出，兩個綁定事件的dom節點之間有包含關係，component是爺爺輩，add是孫子輩。所以，在點擊更深層次節點（add）時候，它的點擊事件和component點擊事件存在於同一個事件流中。所以，因爲事件流的存在，在點擊add時若是不阻止事件冒泡，就會觸發component的點擊事件。兩個點擊事件的結果互斥，因此不管怎麼add，右側區域都沒法出現基礎組件模塊。￣□￣｜｜

####敲黑板knock, knock, 事件流：捕獲階段-目標階段-冒泡階段

如何阻止點擊add觸發component的事件行爲呢？就是要阻止事件冒泡咯。用event的方法: event.stopPropagation()便可。

事件委託/事件代理

「在JavaScript中，添加到頁面上的事件處理程序數量將直接關係到頁面的總體運行性能。致使這一問題的緣由是多方面的。首先，每一個函數都是對象，都會佔用內存；內存中的對象越多，性能就越差。其次，必須事先指定全部事件處理程序而致使的DOM訪問次數，會延遲整個頁面的交互就緒時間。」

「對「事件處理程序過多」問題的解決方案就是事件委託。事件委託利用了事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。例如，click事件會一直冒泡到document層次。也就是說，咱們能夠爲整個頁面指定一個onclick事件處理程序，而沒必要給每一個可單擊的元素分別添加事件處理程序。」

「對於事件代理來講，在事件捕獲或者事件冒泡階段處理並無明顯的優劣之分，可是因爲事件冒泡的事件流模型被全部主流的瀏覽器兼容，從兼容性角度來講仍是建議你們使用事件冒泡模型。」

「事件委託還有一個好處就是添加進來的元素也能綁定事件。」

ps. 關於事件（event）的target和currentTarget，target是真正發生事件的DOM元素，而currentTarget指的是綁定事件的元素。

很是詳細的文章參考