事件冒泡與捕獲 事件委託

2021-06-21 23:20:59 字數 919 閱讀 7755

設想這樣一種情況   

乙個div裡面有個span元素  ,當滑鼠單擊span時,這個事件算是誰的? div還是span?

準確的說兩個都觸發了,這種認可大家都同意,事實就是這樣的,

第二個問題來了,這個事件應該有個先後順序 ,先觸發span還是div?

早期就有兩個主流的瀏覽器廠商各執己見,ie認為,這個事件首先觸發span,然後依次往父節點傳遞,最終傳遞到document,(這個過程稱為冒泡)

網景瀏覽器認為,任何事件都首先觸發document,然後依次往下傳遞到span元素,(這個過程稱為捕獲)

按正常人的思維更加傾向與冒泡這種方式,筆者也是這麼覺得的,

後來的w3c標準覺得兩種方式各有優點,於是綜合了兩種方式,因此兩種都是標準,

就目前來看,ie使用者有下降的趨勢,標準的w3c瀏覽器使用者在不斷增加,但是ie使用者畢竟不少,

所以大部分**開發人員都不會用捕獲,因為ie不支援捕獲,而其他w3c標準瀏覽器既支援捕獲又支援冒泡,

所以很多人只知道冒泡不知道捕獲,就大部分事件處理邏輯來看,冒泡基本已經能夠完成,但是捕獲有自己的優勢,某些相對複雜的事件處理採用冒泡結合捕獲會更佳,

以上是個人對事件冒泡以及捕獲的理解,下面利用冒泡來看一下事件委託實現原理(採用捕獲同樣可以實現,道理一樣)

根據事件冒泡機制,任何事件都會冒泡到document,事件委託就是把所有事件處理函式繫結到document,根據事件引數判斷事件源物件,

判斷不同的物件給予不同的處理函式,

舉個例子:(jquery方式)

$(document).on("click",function(e) ;  break;

case "divid" : function(); break;

default : function();

}});

事件冒泡 事件捕獲和事件委託

事件冒泡會從當前觸發的事件目標一級一級往上傳遞,依次觸發,直到document為止。事件捕獲會從document開始觸發,一級一級往下傳遞,依次觸發,直到真正事件目標為止。事件委託依靠的就是事件冒泡和事件捕獲的機制。box1 box2 box3 上面是三個具有父子關係的box,分別繫結了列印事件,現...

JS事件冒泡 事件捕獲和事件委託

如上圖所示 事件冒泡 結構上從內到外 如上圖所示 事件捕獲 結構上從外到內 使用addeventlistener 方法指定事件是否在捕獲或冒泡階段執行 element.addeventlistener event,function,usecapture usecapture 可選。布林值,指定事件是...

事件捕獲與事件冒泡

事件傳播模型 事件捕獲和事件冒泡兩個過程 即事件先到達根元素,再從根元素一層一層向下傳播到目標元素,然後再一層一層向上傳到根元素。one twothree four var one document.getelementbyid one var two document.getelementbyid...