事件冒泡與事件捕獲

2022-04-08 20:54:10 字數 1444 閱讀 4947

兩種模型

以前,netscape和microsoft是不同的實現方式。

netscape中,div先觸發,這就叫做事件捕獲。

microsoft中,p先觸發,這就叫做事件冒泡。

兩種事件處理順序剛好相反。ie只支援事件冒泡,mozilla, opera 7 和 konqueror兩種都支援,舊版本的opera's 和 icab兩種都不支援 。

事件捕獲

當你使用事件捕獲時,父級元素先觸發,子級元素後觸發,即div先觸發,p後觸發。

事件冒泡

當你使用事件冒泡時,子級元素先觸發,父級元素後觸發,即p先觸發,div後觸發。

w3c模型

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

程式設計師可以自己選擇繫結事件時採用事件捕獲還是事件冒泡,方法就是繫結事件時通過addeventlistener函式,它有三個引數,第三個引數若是true,則表示採用事件捕獲,若是false,則表示採用事件冒泡。

ele.addeventlistener('click',dosomething2,true)

true=捕獲

false=冒泡

傳統繫結事件方式

在乙個支援w3c dom的瀏覽器中,像這樣一般的繫結事件方式,是採用的事件冒泡方式。

ele.onclick = dosomething2

ie瀏覽器

如上面所說,ie只支援事件冒泡,不支援事件捕獲,它也不支援addeventlistener函式,不會用第三個引數來表示是冒泡還是捕獲,它提供了另乙個函式attachevent。

ele.attachevent("onclick", dosomething2);

附:事件冒泡(的過程):事件從發生的目標(event.srcelement||event.target)開始,沿著文件逐層向上冒泡,到document為止。

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

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

• 在ie下設定cancelbubble = true;

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

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

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

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

4.哇,終於寫完了,一邊測試一邊寫的額,不是所有的事件都能冒泡,例如:blur、focus、load、unload,(這個是從別人的文章裡摘過來的,我沒測試)。

事件捕獲與事件冒泡

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

事件冒泡與事件捕獲

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

事件流(事件冒泡與事件捕獲)

dom結構是乙個樹形結構,當乙個html元素發生乙個事件時,該事件會在元素節點與根節點之間的路徑傳播,路徑所經過的節點都會收到該事件,這個傳播過程就是dom事件流。分為事件冒泡模型和事件捕獲模型和dom標準事件模型 是由ie開發團隊提出來的,從dom樹形結構上理解就是事件由葉子節點沿祖先節點一直向上...