jQuery事件绑定和委托的实现

jQuery的事件绑定和委托可以使用 on()、one()、bind()、live()、delegate()等方法实现。

1、on()  ：

语法：$(selector).on(event,childSelector,data,function)

作用：可以在被选元素及子元素上添加一个或多个事件处理程序，并且此事件处理程序适用于当前及未来的元素。

一般使用：

    $("#thisA").on("click", function(){ 

            console.log("id是thisA的标签添加了click点击事件。");

    }); 

或：

     $("#thisA").on("click mouseover",{id:"id"}, function(e){ 

            console.log("id是thisA的标签添加了点击和鼠标悬停事件，传递的值是："+e.data.id);

    });  

或：

扫描二维码关注公众号，回复： 2158058 查看本文章

    $("body").on("click","#thisA" ,function(){

            console.log("可以给当前元素下的子元素添加事件");

    });

可用off()方法移除事件绑定：

    $("#thisA").off("click");

如需添加只运行一次的事件然后移除，可直接使用 one() 。

 

2、bind()：

语法：$(selector).bind(event,data,function,map)

作用：向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数，不能为未来元素添加事件。

一般使用：

     $("#thisA").bind("click", function(){ 

        console.log("id是thisA的标签添加了click点击事件。");

      });

或：

      $("button").bind({

        click:function(){$("p").slideToggle();},

        mouseover:function(){$("body").css("background-color","#E9E9E4");}, 

        mouseout:function(){$("body").css("background-color","#FFFFFF");} 

      }); 

可用unbind()方法移除事件绑定。
 

3、live() ：

    此方法在 jQuery 版本 1.7 中废弃，在版本 1.9 中被移除。请使用 on() 方法代替。

4、delegate()：

语法：$(selector).delegate(childSelector,event,data,function)

用法：为指定的元素及其子元素添加一个或多个事件处理程序，此方法适用于当前或未来的元素。

一般使用：使用实例类似于on（）。

可用undelegate()方法移除事件绑定。

总结：jQuery的事件绑定和委托基本可以使用清一色的on方法进行实现，特殊情况另外考虑。（一家之言，可能有误）