JavaScript之坑了我--事件繫結原理

html元素事件繫結共兩種方式：

（1）行內式：
         <--input type="”button”" data-ke-onclick="”alert(‘haha!’);”/">

         注意：原來事件處理過程可以相當於一個函式的執行語句；

-- <--input type="button"    data-ke-onclick="
         alert('luozhixiao');

         var arr2 = [['luozhixiao',22,'huazhou'],['limeisheng',44,'meizhou']];

         for(var i in arr2){

           for(var j in arr2[i]){

             console.log(arr2[i][j]);

           }
         }

          "/>

（2）動態繫結：（目前做專案最流行的方式：元素、樣式、事件分離，解耦！！！）

                   function myAlert(){

                            alert("dianjile");

                   }

                   document.getElementById("btn1").onclick = myAlert;

原理注意：

這種其實是：物件obj的屬性onclick被賦值了：

Obj . onclick = myAlert ;   //即： Obj . onclick();

即瀏覽器監聽這個html元素上的事件，一旦發生“點選”，則執行onclick();

不要寫成了：document.getElementById("btn1").onclick = myAlert();這樣加了括號的話，變成了瀏覽器執行到這一行時，先執行myAlert()，然後將此函式的返回值賦給onclick事件。

當然如果真的遇上奇葩需求，可以象下面這樣：

                   var i = 0;

                  function myAlert(){//根據條件判斷應該返回哪個函式

                   if(i == 0){

                     return  function(){alert(“條件不足，無法登入！”) ; } ;         

       }else{

          return  function(){alert(“條件充足，請登入！”) ; } ;

        }

                   }

                            document.getElementById("btn1").onclick = myAlert();這樣的話，myAlert()執行後返回值就為一個函式。

（3）新增事件監聽：當同一個html元素的同一個事件需要新增多個函式時使用。
     相容性注意：

　　　基於IE核心的瀏覽器：attachEvent(eventName , callback);僅僅支援冒泡模型　

　　　基於W3C標準的瀏覽器：addEventListener(eventName , callback,capture);

          　　　　　　　　　　　當capture ==false , 預設值：冒泡模型；

　　　　　　　　　  　　　　　當capture == true , 捕捉模型；

注意：低版本的IE核心瀏覽器不支援addEventListener僅支援attachEvent，而且只支援冒泡模型，而且先繫結的function後執行（即倒序執行），事件名稱需要“on”字首。所以程式設計時要注意相容性的問題。

　　　(1)document.getElementById("btn1").attachEvent("onclick",fn1); //冒泡模型

            document.getElementById("btn1").attachEvent("onclick",fn2); //冒泡模型

          //倒序執行：先執行fn2,再執行fn1

          (2)document.getElementById("btn1").addEventListener("click",fn1,false);//冒泡模型

            document.getElementById("btn1").addEventListener("click",fn2,true);//監聽模型

　　　//正序執行。（還是這樣比較符合我們人類的思維吧！）

然而，為了解決相容性問題，我們可以這樣：

　　事件監聽時的相容性問題統一解決方案：jquery原始碼實現也是如此。

         function addEvent(obj , type , eventName){

                   if(window.attachEvent){//如果是基於IE

                            obj.attachEvent("on"+type,eventName);

                   }else{//如果是基於W3C

                            obj.addEventListener(type,eventName);

                   }

         }

         function fn1(){alert("fn1執行...");}

         function fn2(){alert("fn2執行...");}   

         addEvent(document.getElementById("btn1"),"click","fn1");

         addEvent(document.getElementById("btn1"),"click","fn2");

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29900383/viewspace-1822652/，如需轉載，請註明出處，否則將追究法律責任。