IE事件模型 向上冒泡

2021-04-13 02:52:36 字數 2880 閱讀 4378

ie事件模型--向上冒泡, 從觸發源到document樹物件模型dom依次觸發的過程

在dom2標準模型中可以控制向下捕捉事件的過程從document到觸發源.(ie中不支援)

事件捕捉(capturing)的過程分三階段,第一階段就是向下捕捉, 第二目標節點,第三是事件傳播-向上(bubbling)

所有事件都受捕捉階段的控制,但向上傳播觸發的過程也有一些自已的規則

ie中停止傳播的方法是window.event.cancelbubble = true;

在firefox中, dom2級中是stoppropagation()

註冊多個處理程式

dom 2中addeventlistener()及removeeventlistener()三個引數,true為僅用於捕捉事件,觸發是不bubbling,為false為常規事件,將觸發。。

ie中attachevent及detachevent方法

以下為asp.net中的伺服器組合控制項中的bubbling, override onbubbleeven重寫的冒泡,為true是則允許捕捉到裡面的子控制項。從傳播的角度而言,應該說是裡面的子控制項可以冒泡為外面的事件。(不點不通, 暈, 為個麼不叫捕捉不更好理解嗎,難道只是為了不引入乙個新概念)

using system;

using system.web;

using system.web.ui;

using system.web.ui.webcontrols;

namespace customcontrols

set}

public int number

set}

public string text1

set}

public string text2

set}

protected override void createchildcontrols()

protected override bool onbubbleevent(object source, eventargs e)

else if (ce.commandname == "reset")

else if (ce.commandname == "submit")

}return handled;           

}protected virtual void onclick (eventargs e)

}protected virtual void onreset (eventargs e)

}protected virtual void onsubmit (eventargs e)

}  }

}<%@ register tagprefix="custom" namespace="customcontrols" assembly = "cnto_webcontrols" %>

a 事件流(event flow )

事件模型分為兩種:冒泡型事件、捕獲型事件。

冒泡型(dubbed bubbling )事件:指事件按照從最精確的物件到最不精確的物件的順序逐一觸發。

捕獲型(event capturing )事件:它與冒泡型事件相反,指事件按照從最不精確的物件到最精確的物件的順序逐一觸發。

捕獲型事件也被稱作自頂向下(dom層次)的事件模型。

由於ie 瀏覽器不支援捕獲型事件,因此並沒有被廣泛應用。

b 事件監聽

i > 通用監聽方法

示例一:

**如下:

click me

示例二:

**如下:

click me

此**實現了結構與行為的分離。

給瀏覽器新增監聽方法,分為兩種:ie 中的監聽方法、標準dom 的監聽方法。

ii > ie 中的監聽方法

在ie 瀏覽器中,每個元素都有兩個方法來處理事件的監聽。分別是:attachevent( ) 和 detachevent( ) 。

附加事件方法:[object].attachevent(「事件名」,方法名);

分離事件方法:[object].detachevent(「事件名」,方法名);

如:o_p.detachevent("onclick",click_a);

示例:

**如下:

click me

注意:

● 使用這種方式可以為同一元素新增多個監聽函式;

● 在ie 瀏覽器中,函式的執行順序與函式的新增順序相反;

● 在ie 瀏覽器中,雖然函式有先後執行順序,但都會同時呼叫;

iii > 標準dom 的監聽方法

在使用標準dom 的瀏覽器中,每個元素也有兩個方法來處理事件的監聽。分別是:addeventlistener( ) 和 removeeventlistener( ) 。

新增事件監聽方法:[object].addeventlistener(「事件名」,方法名,事件模型 );

移除事件監聽方法:[object].removeeventlistener(「事件名」,方法名,事件模型 );

注意:

這裡的「事件名」不能帶 on ,如:click(如果是onclick 則錯誤!)

「事件模型」為boolean 型別,通常設定為 false ,即「冒泡型」事件。(如果是true 則為「捕獲型」事件)

示例:

**如下:

click me

在firefox 下執行通過,在ie 下報錯。

注意:

● 使用這種方式同樣可以為同一元素新增多個監聽函式;

● 在firefox 瀏覽器中,函式的執行順序與函式的新增順序一致(firefox 與ie 正好相反);

● 在firefox 瀏覽器中,這種方式新增的函式是執行外乙個再執行另乙個(逐個執行);

標準事件模型和IE事件模型

在瀏覽器解析事件的時候,有兩種觸發方式,一種叫做bubbling 冒泡 另外一種叫做capturing 捕獲 這裡不做過多解釋 這裡分析三種繫結事件模式 1 traditional module 傳統方式的事件模型即直接在dom元素上繫結事件處理器,例如 window.onload function...

事件處理模型 事件冒泡,捕獲

事件處理模型 事件冒泡,捕獲 事件冒泡 結構上 非視覺上 巢狀關係的元素,會存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。自底向上 事件捕獲 結構上 非視覺上 巢狀關係的元素,會存在事件捕獲的功能,即同一事件,自父級元素捕獲至子元素 事件源元素 自頂向下 ie沒有捕獲事件 觸發順序,先捕獲,...

IE瀏覽器的事件冒泡機制

一 介紹 1 當瀏覽者在頁面上執行了某個動作,頁面上實際上有多個元素可以響應該事件,假如單機頁面的某個按鈕,該按鈕又處於元素之內,則實際上使用者既單機了該按鈕,也單擊了元素。2 ie中的事件傳遞方向是從事件發生的物件開始,然後依次向該物件所在的父節點傳遞。這種傳遞方式是從下向上傳遞的,因此這種事件的...