***事件週期:
dom標準: 3階段
1. 捕獲(capture): 由外向內依次記錄各級元素繫結的相同事件處理函式
2. 目標觸發: 執行實際觸發事件的元素上的處理函式
3. 冒泡: 由目標元素向外,出發各級父元素上繫結的相同事件處理函式
目標元素(target): 實際觸發事件的元素
ie8: 2個階段: 沒有捕獲階段
事件物件: event: 在事件發生時,自動建立的封裝所有事件資訊的物件
event物件提供了操控事件的方法: 阻止事件, 取消冒泡....
何時: 1. 為了獲得事件相關的資料
2. 操控事件
如何:
獲取: dom標準: 事件物件,預設作為事件處理函式的第乙個引數傳入:
ie8: 事件物件自動儲存在全域性變數event中
相容: function eventhandler(e)
取消冒泡: e.stoppropagation();
利用冒泡:
優化: 盡量少的新增eventlistener
為什麼: 每個eventlistener都是乙個物件
瀏覽器觸發事件時,會輪詢每個eventlistener物件
新增的eventlistener越多,頁面響應速度越低
解決: 當多個平級子元素繫結相同的事件處理函式時
其實,只要在父元素繫結一次,所有子元素共用即可!
難題: 1. 如何獲得目標元素:
this->父元素 x
dom: e.target ->目標元素
ie8: e.srcelement
相容: var target=e.target||e.srcelement;
2. 鑑別目標元素是否想要:
判斷元素的名稱或屬性
事件冒泡,事件捕獲
js事件流中有一種事件被稱為 冒泡事件 當乙個元素被觸發乙個事件時,該目標元素上的事件會優先被執行,然後向外傳播到每個祖先元素,恰如水裡的乙個泡泡似的,從產生就一直往上冒,到達水平面時,它才消失。在這個過程中,如果你只希望觸發目標元素上的事件,而不想它傳播到祖先元素上去,那麼你需要在 泡泡 離開物件...
事件捕獲 事件冒泡
body div id div1 div id div2 div id div3 div div div body script window.onload function odiv1.onclick fn1 odiv2.onclick fn1 odiv3.onclick fn1 false 冒泡...
事件捕獲與事件冒泡
事件傳播模型 事件捕獲和事件冒泡兩個過程 即事件先到達根元素,再從根元素一層一層向下傳播到目標元素,然後再一層一層向上傳到根元素。one twothree four var one document.getelementbyid one var two document.getelementbyid...