JS事件綁定的兩種形式

標籤：lis   str   低版本   支援   element   相容   div   pre   覆蓋   

第一種：

obj.on*=function(){}

var btn=document.getElementById(‘myBtn‘);btn.onclick=function(){    alert(1);}

這種方法是很常用，就是將一個函數賦值給一個事件處理常式。

它的優點是簡單，然後具有跨瀏覽器的優勢，現代所有瀏覽器都支援。

如果要取消這種形式綁定的事件，可以將事件處理常式屬性的值設為null：

btn.onclick=null;  //刪除事件處理常式

但是，這種形式的綁定有一個缺點，那就是不能在同一個對象上綁定兩個事件，如下：

oDiv1.onclick=function(){            alert(1);        }oDiv1.onclick=function(){            alert(2);        }                             //2

上面代碼在同一對象上分別綁定了兩個事件，結果只彈出2，是因為後面綁定的事件會覆蓋前面的事件。

要想在一個對象上同時綁定兩個事件或多個事件，就需要第二種綁定形式了。

 

 

第二種：

這種形式稱為“DOM2級事件”,定義了兩個方法：addEventListener()和removeEventListener()。

他們都接受3個參數：

第一個參數：要處理的事件類型名稱；

第二個參數：處理常式的函數；

第三個參數：布爾值，表示是否捕獲，true則為捕獲，false則為冒泡。

例：

var btn=document.getElementById(‘myBtn‘);btn.addEventListener(‘click‘,function(){    alert(1);},false);

通過addEventListener()添加的事件只能通過removeEventListener()來刪除，

尤其注意的是，傳入的匿名函數無法被刪除，比如要刪除上面代碼綁定的事件，

btn.removeEventListener(‘click‘,function(){    alert(1);},false)

這樣寫是沒有用的，看似刪除的是同一個處理函數，但其實是兩個不同的函數了，雖然長的一樣。

所以通常這樣寫：

var btn=document.getElementById(‘myBtn‘);var show=function(){    alert(1);}btn.addEventListener(‘click‘,show,false);//btn.removeEventListener(‘click‘,show,false);

同時，它可以在一個對象上綁定多個事件：

var show=function(){    alert(1);}var show2=function(){    alert(2);}btn.addEventListener(‘click‘,show,false);  //1btn.addEventListener(‘click‘,show2,false);  //2

 

相容：

addEventListener() 和 removeEventListener()不支援IE8及其以下版本，對於低版本IE，同樣有兩個方法：

attachEvent()  和  detachEvent(),他們各自接收兩個參數：事件處理常式名稱和事件處理函數。

因為IE8和更早版本只支援事件冒泡，所以通過這種方法添加的事件處理常式都會被添加到冒泡階段。

var btn=document.getElementById(‘myBtn‘);var show=function(){    alert(1);}btn.attachEvent(‘onclick‘,show);//btn.detachEvent(‘onclick‘,show);

同樣，刪除時也必須提供相同參數，即傳入匿名函數不能被刪除，如上寫法正確。

注意事件類型名稱，要加上‘on’。

同時，它也可以在一個對象上綁定兩個事件，但結果略微不同：

var btn=document.getElementById(‘myBtn‘);var show=function(){    alert(1);}var show2=function(){    alert(2);}btn.attachEvent(‘onclick‘,show);   //1btn.attachEvent(‘onclick‘,show2);  //2

在IE8及其以下版本，可以執行這段代碼，但彈出結果是倒序的，即先彈出2，再彈出1。

我在IE9和IE10下測試，彈出結果又是正序的，先彈出1，再彈出2。

IE11不支援這個方法，同樣Chrome和Firefox也不支援。

 

總結！！！

標準瀏覽器（含ie）： obj.addEventListener(事件名稱，事件函數，是否捕獲)

1.有捕獲

2.事件名稱沒有on

3.事件執行的順序是正序

4.this指向觸發該事件的對象

 

ie: obj.attachEvent(事件名稱，事件函數)

1.沒有捕獲

2.事件名稱有on

3.事件函數執行的順序：標準ie正序，非標準ie倒序

4.this指向window

 

關於this問題，可以通過call()方法修改。

 

 

 

 

 

 

 

 

JS事件綁定的兩種形式