前端菜鳥學習之DOM事件處理

1.dom0級事件處理程式：就是將乙個函式賦值給乙個事件處理程式屬性，至今仍為現代所有瀏覽器所支援，主要得益於其跨瀏覽器的優勢，

要使用dom0級事件，

首先要得到操作物件的引用，具體例項如下圖所示。

var obtn = document.queryselector('.btn');
obtn.onclick = function()

這樣就為obtn元素指定了乙個onclick的事件處理程式，當然也可以刪除給該元素新增的事件處理程式，其方法如下：

obtn.onclick = null;

再次單擊按鈕不會有任何動作發生。

2.dom2級事件處理程式：'dom2級事件'定義了兩個方法：addeventlistener()(用於新增和指定事件處理程式)和removeeventlistener()(用於刪除事件處理程式)，這兩個函式接收三個引數：1.要處理的事件型別，2.事件處理程式函式fn，3.布林值，如果這個布林值是true，表示在捕獲階段呼叫事件處理程式，如果是false，表示在冒泡階段呼叫事件處理程式。具體例項如下圖所示：

var obtn = document.queryselector('.btn');
obtn.addeventlistener('click',function(),false);

與dom0級事件相比,dom2級事件的好處是可以給同乙個元素新增多個事件處理程式而不被覆蓋，看下面例子：

var obtn = document.queryselector('.btn');
obtn.addeventlistener('click',function(),false);
obtn.addeventlistener('click',function(),false);

其結果會依次彈出click1，click2。但是如果採用dom0級事件處理，則會產生覆蓋。

var obtn = document.queryselector('.btn');
obtn.onclick = function () 
obtn.onclick = function ()

其結果只會彈出99。但是採用dom2級事件在ie中會有相容問題（ie8以及更早的版本不支援），下面會馬上說ie的事件處理程式。

3.ie的事件處理程式:實現了與dom中類似的兩個方法：attachevent()(新增指定的事件處理程式) 和detachevent(刪除指定的事件處理程式)，這兩個方法有兩個引數：事件型別，事件處理函式。請看下面的例子。

var obtn = document.queryselector('.test');
obtn.attachevent('onclick',function());

注意這裡函式的事件型別要寫成onclick形式，在dom2級事件裡須寫成click形式。還有個需要注意的問題就是ie事件處理程式函式中this的指向，dom事件處理程式函式裡面的this指的是繫結事件的元素本身，而在使用attachevent()方法時,事件處理程式會在全域性作用域中執行，因此這裡的this指向的是window物件。

var obtn = document.queryselector('.test');
obtn.attachevent('onclick',function());

var obtn = document.queryselector('.test');
obtn.addeventlistener('click',function(),false);

var obtn = document.queryselector('.test');
obtn.onclick = function ()

支援ie事件處理程式的瀏覽器有ie和opera；

4.跨瀏覽器的事件處理程式:能夠實現視情況分別使用dom0級事件、dom2級事件或ie方法來新增事件的功能，將實現過程封裝在乙個名叫eventutil的物件中。

var eventutil = else if(element.attachevent)else
},removehandler:function()else if(element.detachevent)else
}}

呼叫eventutil 中的addhandler方法，首先會檢測傳入的元素中是否存在dom2級方法，如果存在，則使用該方法，如果存在的是ie的方法，則使用第二種方案，如果前面兩種方案都無效，則預設採用dom0級事件。下面來看個使用的例子：

var obtn = document.queryselector('.btn');
var handler = function () 
eventutil.addhandler(obtn, 'click', handler);

前端菜鳥學習之DOM事件處理

前端菜鳥的成長學習之路（一）

Web前端學習JS篇之「DOM事件」

前端菜鳥是這樣入門學習的，點進來！

前端菜鳥學習之DOM事件處理

前端菜鳥的成長學習之路（一）

Web前端學習JS篇之「DOM事件」

前端菜鳥是這樣入門學習的，點進來！

相關推薦