JavaScript之坑了我--事件绑定原理

html元素事件绑定共两种方式：

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

         注意：原来事件处理过程可以相当于一个函数的执行语句；

-- <--input type="button"    data-ke-οnclick="
         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/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/29900383/viewspace-1822652/