天天看點

JavaScript權威設計--事件冒泡,捕獲,事件句柄,事件源,事件對象(簡要學習筆記十八)

1.事件冒泡與事件捕獲

2.事件與事件句柄

3.事件委托:利用事件的冒泡技術。子元素的事件最終會冒泡到父元素直到跟節點。事件監聽會分析從子元素冒泡上來的事件。

事件委托的好處:

    1.每個函數都是對象,都會占用記憶體,記憶體中對象越多,性能越差。

    2.必須事先指定所有事件處理程式而導緻的dom通路次數,會延遲整個頁面的互動就緒時間。

怎樣處理由于事件較多引起的性能差:

1.采用事件委托技術,限制履歷的連接配接數量

2.在不需要的時候移除事件處理程式

例子:

html:

js:

注意:通過設定innerhtml可以把按鈕移走,但是事件處理程式依舊與按鈕保持着事件處理程式的引用都儲存在記憶體中。

    是以最好手動移除:

4.事件對象與事件源

5.取消事件預設行為

JavaScript權威設計--事件冒泡,捕獲,事件句柄,事件源,事件對象(簡要學習筆記十八)
JavaScript權威設計--事件冒泡,捕獲,事件句柄,事件源,事件對象(簡要學習筆記十八)

6.阻止事件冒泡

JavaScript權威設計--事件冒泡,捕獲,事件句柄,事件源,事件對象(簡要學習筆記十八)
JavaScript權威設計--事件冒泡,捕獲,事件句柄,事件源,事件對象(簡要學習筆記十八)

7.event與target

event:代表了包含了事件的所有狀态。

target:觸發事件的元素。

currenttarget:事件綁定的元素。

注意着兩者的差別。

JavaScript權威設計--事件冒泡,捕獲,事件句柄,事件源,事件對象(簡要學習筆記十八)
JavaScript權威設計--事件冒泡,捕獲,事件句柄,事件源,事件對象(簡要學習筆記十八)

 轉載:http://www.cnblogs.com/zqzjs/p/4878785.html

繼續閱讀