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判斷是在綁定的元素自身發生的仍是由子元素冒泡上來的。參數多個的話用''''括起來，而不是[]。