事件冒泡和事件捕獲解析使用js

2022-10-09 07:06:09 字數 1314 閱讀 6567

一、頁面常常有事件點選的場景,這裡有兩種情況分辨 事件冒泡和事件捕獲

瀏覽器上最外層是window物件

1.事件捕獲

---> 它是從最外層開始發生到最具體的元素 p

2.事件冒泡是從結構內層最裡面元素發生到最外層document物件 最內層向上到document物件上

p ->div ->body ->html ->document

統一標準 ---先捕獲再冒泡

addeventlistener 第三個引數視為 冒泡和捕獲準備 ,預設false為冒泡,true為事件捕獲事件函式呼叫

阻止事件捕獲 和阻止冒泡 監聽第三個引數為true e.stopimmediatepropagetion();

二、那麼stopimmediatepropagation()和stoppropagation() =>阻止冒泡使用 的區別在**

後者阻止是只會阻止冒泡或者是捕獲。但是前者除此之外還會阻止該元素的其他事件發生

但是後者就不會阻止其他事件的發生

三、相容解決 event獲取相容寫法及阻止冒泡和預設事件

1.阻止冒泡事件相容寫法

function

stopbubble()

else

}

2.阻止預設事件相容寫法

function

stopevent()

else}//

這種用點 是網頁有預設行為動作,提交行為重新整理網頁,網頁滾動滑鼠滾輪,網頁滾動條會動

//阻止事件預設行為 不需要時 直接將這些事件阻止掉

內層阻止事件

function

a(e)

3.j**ascript中事件幾種相容性寫法

//

1.獲取事件

e = e ||window.event

//2.獲取事件目標

e.target ||e.srcelement

//3.鍵盤事件

event.keycode ||event.which

//4.阻止事件冒泡

e.stoppropagation ? e.stoppropagation() : e.cancelbubble = true

js 事件冒泡和事件捕獲

1 冒泡型事件 事件按照從最特定的事件目標到最不特定的事件目標 document物件 的順序觸發。ie 5.5 div body document ie 6.0 div body html document mozilla 1.0 div body html document window 2 捕獲...

Js冒泡事件和捕獲事件

js中冒泡事件和捕獲事件 冒泡事件 冒泡事件是從裡向外,即是從被繫結元素開始一直向外到達頁面的所有祖先元素都會被觸發,這 一過程被稱為事件冒泡。這個事件從原始元素開始一直冒泡到dom樹的最上層 捕獲事件 捕獲事件是從頁面的最上層到被繫結元素都會觸發。ie只支援事件冒泡,不支援事件捕獲 冒泡事件和捕獲...

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

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