事件繫結與事件捕獲 冒泡

2021-08-07 11:15:14 字數 1230 閱讀 8553

element.addeventlistener(event, function, usecapture)

引數event

必須。字串,指定事件名。

(注意: 不要使用 "on" 字首。 例如,使用 "click" ,而不是使用 "onclick"。) 

引數    function必須。指定要事件觸發時執行的函式。 

當事件物件會作為第乙個引數傳入函式。 事件物件的型別取決於特定的事件。例如, "click" 事件屬於 mouseevent(滑鼠事件) 物件。

引數    usecapture

可選。布林值,指定事件是否在捕獲或冒泡階段執行。

可能值:

true - 事件控制代碼在捕獲階段執行

false- false- 預設。事件控制代碼在冒泡階段執行

1.關於事件捕獲:事件從最不精確的物件(document 物件)開始觸發,然後到最精確(從外到裡)

2.關於事件冒泡:事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發(從裡到外)

3.dom事件流:同時支援兩種事件模型:捕獲型事件和冒泡型事件,但是,捕獲型事件先發生。兩種事件流會觸及dom中的所有物件,從document物件開始,也在document物件結束。

w3c模型是將兩者進行中和,在w3c模型中,任何事件發生時,先從頂層開始進行事件捕獲,直到事件觸發到達了事件源元素。然後,再從事件源往上進行事件冒泡,直到到達document;

ie只支援事件冒泡,不支援捕獲;不支援addeventlistener但是提供了乙個函式attachevent,不過這個函式沒有第三個引數,且第乙個引數帶「on";

事件的傳播是可以阻止的:

• 在w3c中,使用stoppropagation()方法

• 在ie下設定cancelbubble = true;

在捕獲的過程中stoppropagation();後,後面的冒泡過程也不會發生了~

3.阻止事件的預設行為,例如click 後的跳轉~

• 在w3c中,使用preventdefault()方法;

• 在ie下設定window.event.returnvalue = false;

4.不是所有的事件都能冒泡,例如:blur、focus、load、unload,

**:click

結果://捕獲到parent

//捕獲到child

//冒泡到child

//冒泡到parent

事件捕獲與事件冒泡

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

事件冒泡與事件捕獲

dom事件標準定義了兩種事件流,這兩種事件流有著顯著的不同並且可能對你的應用有著相當大的影響。這兩種事件流分別是捕獲和冒泡。和許多web技術一樣,在它們成為標準之前,netscape和微軟各自不同地實現了它們。netscape選擇實現了捕獲事件流,微軟則實現了冒泡事件流。幸運的是,w3c決定組合使用...

事件冒泡與事件捕獲

兩種模型 以前,netscape和microsoft是不同的實現方式。netscape中,div先觸發,這就叫做事件捕獲。microsoft中,p先觸發,這就叫做事件冒泡。兩種事件處理順序剛好相反。ie只支援事件冒泡,mozilla,opera 7 和 konqueror兩種都支援,舊版本的oper...