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

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

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

<div id="box" onClick="alert('HELLO WORLD')">
  <div id="box2" onClick="notice();"></div>
  <div id="box3" onClick="service('HELLO WORLD'');"></div>
</div>

function notice(){ alert(HELLO WORLD'");} 
function service(str){ alert(str);} 

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

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

優點：

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

缺點如下：

 1）復用性不好。

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

 3）如果發生修改需要同時修改HTML和JS，改動相對困難。

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

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

 

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

var box = document.getElementById("box");

box.onclick = function(){
    alert("HELLOW WORLD");
};

說明：通過以上形式可以把事件與HTML完全分離，是最常用的形式之一。

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

box.onclick = function(){
        fnA();
        fnB();
};
function fnA(){
      alert("我會被執行");
} 
function fnB(){
    alert("我也會被執行");
}

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

優點：

1）兼容性好，基本支持所有瀏覽器

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

缺點：

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

3、事件監聽方法三 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);  

4、IE瀏覽器的特性型：

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