天天看點

js Dom事件

Dom事件模型:就是指事件捕獲和事件冒泡。

事件流:就是當使用者點選觸發了事件是怎樣傳遞到壓面上的過程就是事件流,事件流分為捕獲、目标階段、冒泡三個階段,當使用者點選按鈕就是捕獲階段,事件通過捕獲到達目标元素的時候就是目标階段,冒泡階段就是從目标階段上傳到window對象。

為什麼沒有Dom1級事件:因為Dom設計的時候沒有設計到事件的部分,是以沒有Dom1級事件。

Ele.addEventListener('click',function(){},false),在IE浏覽器下是Ele.attachEvent('click',function(){},false)。

Dom3級事件與Dom2一樣,隻是事件的類型增加了更多的鍵盤事件和滑鼠事件。

事件捕獲的具體流程:window->document->html->body->……->目标元素(獲去html标簽的方法是document.documentElement;)

Dom2級事件的第3個參數是一個布爾值,預設為false,也就是事件冒泡;第3個參數為true是,表示預設事件觸發的是事件捕獲。那麼具體什麼是事件冒泡和事件捕獲呢?

js Dom事件

首先我們給所有的盒子都添加上點選事件,當觸發事件是彈出它自己的名字

js Dom事件

剛開始我們的預設觸發事件是事件冒泡,當我們點選son元素時會依次彈出son,parent,grandpa;如果我們點選的是parent元素會依次彈出parent,grandpa;當我們點選最外層的元素grandPa是隻會彈出grandPa。這樣當我們點選内層元素時,由目前元素依次向上傳遞的觸發事件的效果,就像是湖底的氣泡一樣逐漸向上傳遞的過程稱為事件冒泡。

現在我們改變觸發事件的預設事件為事件捕獲,隻需要将Dom2級事件的第3個參數改為true即可。

js Dom事件

現在當我們點選元素son時,會依次彈出字元串grandPa、parent、son,點選parent時會彈出grandpa、parent,點選grandpa是隻會彈出grandpa。說名預設為事件捕獲的情況下,事件的觸發順序是最先觸發最外層的事件,由外向内依次觸發。效果就像是由外向内依次捕獲的一樣。

有時預設事件也不一定會适用我們的使用場景,是以就需要清除事件冒泡,那麼當我們點選内層元素的時候就不會觸發它祖先元素的相同的監聽事件了

js Dom事件

需要在哪個元素上取消事件冒泡就添加以上辨別的代碼即可,同樣如果需要取消事件捕獲,也是添加這樣的代碼。

當我們阻止了事件冒泡,那麼它的效果會變為,隻有我們點選的那個元素的事件會被觸發

阻止事件捕獲後,的效果是,無論我們點選哪個元素,都隻會觸發最外層哪個元素的點選事件。

自定義事件:

var ele = document.getElementById('ele');
var eve = new Event('custom');	//自定義事件名命名為custom,并指派給自定義對象
ele.addEventListener('custom', function() { 	//注冊自定義事件
	alert('custon');
})

//當滑鼠滑過時觸發自定義事件
ele.onmouseover = function() {
	// 調用dispatchEvent方法觸發事件
	ele.dispatchEvent(eve);
}
           

繼續閱讀