jquery循环绑定事件

< html >
     < head >
         < title ></ title >
         < script  type ="text/javascript"  src ="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ script >
     </ head >
     < body >
         < script  type ="text/javascript" >
            $(document).ready( function  () {
                 var  array  =  [ 0 ,  1 ,  2 ,  3 ];

                 //  1.
                 /*
                for(var index in array) {
                    $("#btn" + index).click(function() {
                        var item  = array[index];
                        alert(item);
                    });
                } */
                 //  始终弹出3， 因为function() {} 并没有被立即解析，直到调用的时候才被解析，这时index已经是3了。


                 //  2.
                 /*
                for(var index in array) {
                    $("#btn" + index).click(function(i) {
                        var item  = array[i];
                        alert(item);
                    }(index));
                } */
                 //  立即弹出0, 1, 2, 3，因为使用了function() {}(index)立即被解析，遇到alert，就立即弹出来了。


                 //  3.
                 /* for (var index in array) {
                    $("#btn" + index).click(function (i) {
                        return function () {
                            var item = array[i];
                            alert(item);
                        };
                    } (index));
                } */
                 //  正确执行，点击btn0，弹出0，点击btn1，弹出1...
                 //  1.因为function(i) {}(index)是被立即解析的，所以i依次送入的是0, 1, 2, 3
                 //  2.内部没有直接alert，是因为不想立即执行，想点击时再执行，所以返回了一个函数出去。


                 //  4.
                 for  ( var  index  in  array) {
                    $( " #btn "   +  index).bind( " click " , {index: index}, clickHandler);
                }

                 function  clickHandler(event) {
                     var  index  =  event.data.index;
                     var  item  =  array[index];
                    alert(item);
                }
                 //  正确执行，点击btn0，弹出0，点击btn1，弹出1...
                 //  利用了event.data，因为index在绑定的时候已经被持久化到event.data中了，所以响应的时候我们可以取到。
            });
        
         </ script >

         < input  type ="button"  id ="btn0"  value ="btn0"   />
         < input  type ="button"  id ="btn1"  value ="btn1"   />
         < input  type ="button"  id ="btn2"  value ="btn2"   />
         < input  type ="button"  id ="btn3"  value ="btn3"   />         
     </ body >
</ html >