JS 事件流與事件處理程式

2022-01-16 09:01:27 字數 2415 閱讀 6618

1.事件流:從頁面中接收事件的順序

1.1 ie :事件冒泡流

1.2 netscape :事件捕獲

1.3 dom事件流 :事件捕獲階段——事件目標階段——事件冒泡階段

dom2級事件規定 :捕獲階段不會涉及目標事件。

2.事件處理程式

事件 :使用者或者瀏覽器自身執行的 某種動作

事件處理程式 :響應某個事件的 函式 。

2.1 html事件處理程式

用乙個與該事件處理程式同名的html特性來指定。

2.1.1包含要執行的具體動作

2.1.2 呼叫其他地方定義的指令碼

2.1.3 缺點

1.時差問題:使用try-catch塊捕捉錯誤。onclick=」try catch(ex) {} 」

2.程式的作用域鏈在不同瀏覽器中會導致不同結果

3.html和js**耦合緊密

2.2 dom0級事件處理程式

將乙個函式賦值給乙個事件處理程式屬性,例如:onclick。

為事件處理程式賦值。

btn.onclick = function();

事件處理程式在元素的作用域中執行,this指向當前元素。

刪除事件處理程式:

btn.onclick = null;

2.3 dom2級事件處理程式

addeventlistener(處理的事件名,事件處理程式函式,布林值);

removeeventlistener(處理的事件名,事件處理程式函式,布林值);

布林值:捕獲階段呼叫事件處理程式:true。冒泡階段呼叫:false。大多數情況下用false。

btn.addeventlistener(「click」 , function(), false);

好處:可以新增多個事件處理程式。事件按照新增先後順序執行。

問題:匿名函式無法移除。

最好寫成

var handler = function();

btn.addeventlistener(「click」, handler, false);

btn.removeeventlistener(「click」, handler, false);

2.4 ie事件處理程式

attachevent(事件處理程式名稱,事件處理程式函式);

detachevent(事件處理程式名稱,事件處理程式函式);

通過該方法新增的事件處理程式,都會被新增到冒泡階段。

btn.attachevent(「onclick」,function());

注意:使用dom級方法時,事件會在所屬元素的作用域內執行;使用attachevent()方法,事件處理程式會在全域性作用域執行,this==window。

好處:可以新增多個事件處理程式。後新增先執行。

問題:匿名函式無法移除。

var handler = function();

btn.attachevent (「onclick」, handler);

btn.detachevent (「onclick」, handler);

2.5跨瀏覽器事件處理程式

1.建立乙個方法addhandler():區分使用哪種方法來新增事件;

2.建立乙個物件eventutil。擁有兩個方法。

3.addhandler(要操作的元素,事件名稱,事件處理函式)。

4.removehandler(要操作的元素,事件名稱,事件處理函式)。

var eventutil =  else if(element.attachevent) else 

},removehandler: function(element,type,handler) else if(element.attachevent) else

}};

使用:

eventutil.addhandler(btn ,」click」,handler);

eventutil.removehandler(btn ,」click」,handler);

JS 事件流與事件處理程式

1.事件流 從頁面中接收事件的順序 1.1 ie 事件冒泡流 1.2 netscape 事件捕獲 1.3 dom事件流 事件捕獲階段 事件目標階段 事件冒泡階段 dom2級事件規定 捕獲階段不會涉及目標事件。2.事件處理程式 事件 使用者或者瀏覽器自身執行的 某種動作 事件處理程式 響應某個事件的 ...

JS事件 事件處理程式之IE事件處理程式

與訪問dom中的event物件不同,要訪問ie中的event物件有幾種不同的方式,取決於指定事件處理程式的方法。在使用dom0級方法新增事件處理程式時,event物件作為window物件乙個屬性存在。來看下面例子。var btn document.getelementbyid mybtn btn.o...

JS事件程式處理

1 事件 使用者 瀏覽器自身執行的某種動作 點選click 載入load,頁面滾動scroll的等 2 事件處理程式 響應某個事件的處理函式,又叫事件偵聽器 事件流1 事件冒泡 由ie提出 由下向上 2 事件捕獲 由netscape團隊提出 由上向下 由於老版本瀏覽器不支援,所以很少使用 3 dom...