js基礎——事件綁定（事件監聽）

JavaScript事件一共有三種監聽方法分別以下：

一、事件監聽一夾雜在html標籤內

1 <div id="box" onClick="alert('HELLO WORLD')">
2   <div id="box2" onClick="notice();"></div>
3   <div id="box3" onClick="service('HELLO WORLD'');"></div>
4 </div>
5 
6 function notice(){ alert(HELLO WORLD'");} 
7 function service(str){ alert(str);} 

說明：以上把事件監聽功能onClick寫到div中的形式是最古老原始形式，全部主流瀏覽器都支持。

相似行內CSS樣式同樣，是有效的(注意大小敏感),可是缺點和寫到行內的CSS樣式同樣。

優勢：

1）兼容性好，基本上全部瀏覽器都支持該種方式

缺點以下：

 1）複用性很差。

 2）JS與HTML夾雜到一塊，代碼混亂，發生錯誤難以檢測和排除，不利於分工合做。

 3）若是發生修改須要同時修改HTML和JS，改動相對困難。

爲了解決以上問題把事件監聽形式改進以下，如下方式也是目前主流的使用方式之一。

二、事件監聽方法二 on+"事件"

 

1 <div id="box"></div>
2 
3 var box = document.getElementById("box");
4 
5 box.onclick = function(){
6     alert("HELLOW WORLD");
7 };

說明：經過以上形式能夠把事件與HTML徹底分離，是最經常使用的形式之一。

以上對於通常項目已經足夠用。但若是想單擊一次執行多個函數時，這種綁定方式就沒法完成了：

 1 box.onclick = function(){
 2         fnA();
 3         fnB();
 4 };
 5 function fnA(){
 6       alert("我會被執行");
 7 } 
 8 function fnB(){
 9     alert("我也會被執行");
10 }

說明：這種狀況下 alert("HELLOW WORLD") 就不會被執行了，也就是說後面的函數覆蓋了以前聲明的函數。

優勢：

1）兼容性好，基本支持全部瀏覽器

2）作到了文檔與JS的分離，方便後期的代碼管理

缺點：

1）同一個事件，在執行多個函數時會發生覆蓋

三、事件監聽方法三 element.addEventListener（事件名，函數，冒泡/捕獲）

<div id="box">
  <div id="box1"></div>
  <div id="box2"></div>
</div>

var box = document.getElementById("box");
box.addEventListener("click",fnA,false);
box.addEventListener("click",fnB,false);

function fnA(){
        alert("HELLO WORLD！");
}
function fnB(){
        alert("HI CHINA！");
}

上面兩個函數fA(),fB()都會執行，不會發生覆蓋現象。

使用介紹：

addEventListene是DOM2的標準語法，新版本主流瀏覽器基本都支持。可是老版本IE瀏覽器不支持；

這種綁定方法有三個參數：

第一個是事件類型，不須要on前綴，但事件名需加  " " ；
第二個參數是發生這個事件的時候要調用的函數；

第三個是布爾值的true或false.（默認值是false）
false代碼是以冒泡型事件流進行處理，通常都選用false.
true意味着代碼以捕獲型事件流進行處理，不是必須不推薦使用。

優勢：

1）作到JS與HTML文檔分離，便於代碼維護；

2）不會發生像on+"事件"的函數覆蓋現象；

3）提供監聽的事件以冒泡或者捕獲的可選方式執行

缺點：

1）兼容性還不完善，老闆IE瀏覽器可能不兼容；

2）方法名較長，記憶稍有難度

注：使用element.removeEventListener(type,listener,useCapture);方法能夠移除已經添加的實際。
        使用方法：box.removeEventListener("click",fnB,false);  

四、IE瀏覽器的特性型：

老版本IE瀏覽器有本身的方法 attachEvent和detachEvent.語法格式以下：element.attachEvent("onclick",listenerFunction) //添加事件element.detachEvent("onclick",listenerFunction) //刪除事件