以前寫上圖所示的鼠標點擊觸發事件,一般都是用如下所示的給每一個表示列表的標簽綁定一個click事件(演示用的例子的框架是React):
毫無疑問,這樣是比較繁瑣的,以后維護修改改個函數名什么的還不方便(當然sublime還是有ctrl+d的么= =),水平提高一點的寫法如下:
但是,實際上還是為每一個要觸發點擊的標簽綁定了一個click事件,這就導致了“事件處理程序過多”。
在JavaScript中,添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能。導致這一問題的原因是多方面的。首先,每個函數都是對象,都會占用內存;內存中的對象越多,性能就越差。其次,必須事先指定所有事件處理程序而導致的DOM訪問次數,會延遲整個頁面的交互就緒事件。 ——摘自《JavaScript高級程序設計》
那么解決辦法是利用了事件冒泡機制,例如,click事件會一直冒泡到document層,所以,我們只要如下所示就好:
看看瀏覽器內的結果:
沒毛病~以后就只要給父元素綁定一個事件就可以了。