javascript事件學習筆記

標籤：

事件冒泡並不是所有的事件都支援事件冒泡，比如submit ,focus,blur不支援事件冒泡，mouseover，mouseout雖然支援冒泡，但是一般不用，因為需要經常計算元素的位置，消耗比較大。事件冒泡帶來的優點是可以使用事件委託，提高了頁面的效能，缺點是父級元素中如果也綁定了一樣的事件，那麼子項目事件的觸發也會觸發父級元素的事件，解決辦法就是禁止子項目的事件冒泡。事件委託這是好東西，藉助他可以提高頁面的效能。首先，每個函數都是對象，都會佔用記憶體，記憶體中的對象越多，效能越差。其次，必須事先指定所有事件程式而導致DOM的訪問次數，會延遲整個頁面的互動時間。比如cick事件，我們可以把頁面上所有的click事件都綁定到document元素上，然後根據event.target對象的屬性（比如class，id什麼的）區分，確定是來自哪個事件然後執行相應的代碼。事件委託還有一個優點，如果某些DOM是動態添加的，那麼一旦添加後也會立即綁定相應的事件（如果在document元素繫結了的話），就不用再重新去綁定啦。使用event.currentTarget == event.target可以判斷是在綁定的元素自身發生的還是由子項目冒泡上來的。jQuery中的事件綁定函數：on關鍵是它的selecter參數，如果沒有這個參數，直接在這個元素上觸發，不管是本身觸發還是子項目冒泡上來觸發，當然可以在function中區分event.target實現事件委託。如果selecter參數存在，那麼為事件委託。只有在參數中選取器這一級及其後代上觸發，之上的不會觸發。同樣可以用event.currentTarget == event.target判斷是在綁定的元素自身發生的還是由子項目冒泡上來的。參數多個的話用‘‘‘‘括起來，而不是[]。

javascript事件學習筆記