JS 的事件委託機制

標籤：關係   image   延遲   對象   技術分享   列表   例子   方便   事件冒泡   

　　

　　以前寫所示的滑鼠點擊觸發事件，一般都是用如下所示的給每一個表示列表的標籤綁定一個click事件（示範用的例子的架構是React）：

　　　　

　　毫無疑問，這樣是比較繁瑣的，以後維護修改改個函數名什麼的還不方便（當然sublime還是有ctrl+d的麼= =），水平提高一點的寫法如下：

　　　　

　　但是，實際上還是為每一個要觸發點擊的標籤綁定了一個click事件，這就導致了“事件處理常式過多”。

　　在JavaScript中，添加到頁面上的事件處理常式數量將直接關係到頁面的整體運行效能。導致這一問題的原因是多方面的。首先，每個函數都是對象，都會佔用記憶體；記憶體中的對象越多，效能就越差。其次，必須事先指定所有事件處理常式而導致的DOM訪問次數，會延遲整個頁面的互動就緒事件。　　——摘自《JavaScript進階程式設計》

　　那麼解決辦法是利用了事件冒泡機制，例如，click事件會一直冒泡到document層，所以，我們只要如下所示就好：

　　　　

　　看看瀏覽器內的結果：

　　　　

　　沒毛病~以後就只要給父元素繫結一個事件就可以了。

　　　　

JS 的事件委託機制