jquery的bind、delegate、on、one绑定事件学习记录

2019独角兽企业重金招聘Python工程师标准>>>

为了对比这几种方法，我简单做了个例子 html代码如下：

<p>我啦啦啦啦啦啦啦</p>
<p>我啦啦啦啦啦啦啦</p>
<p>我啦啦啦啦啦啦啦</p>
<p>我啦啦啦啦啦啦啦</p>
<button id="mybtn">button</button>

js代码如下：

$("#mybtn").click(function(event){
    $("<p>wolalalallalalalala</p>").insertAfter("#mybtn");
});

这段js代码的意思是点击按钮，会生成一个新的p元素，用来比较绑定事件的方法对动态生成的元素是否有效。

一：直接添加事件

$("p").click(function(event){
    $(this).slideToggle();
});

这种方法简单粗暴，也就是bind()的一种简单方法,因此没给点击button生成的p元素添加到事件。

二:bind()

$("p").bind("click",function(event){
    $(this).slideToggle();
});  //未来生成的元素无效，这个例子点击button后生成的p元素没绑定到事件；

上面已经泄露了bind方法的一个特点，就是不能为动态生成的元素添加事件。 除了这个特点外，bind还有个弊端，就是当要给多个元素（元素集合）绑定事件时，因为相当于给每个事件都分别添加事件，所以效率很低。这种情况用on和delegate会更好。

三：on()

$(document).on("click","p",function(event){
    $(this).slideToggle();
})         //也可以为未来创建的元素绑定事件，这个例子中即点击button后添加的p元素也添加了这个事件；

on方法除了可以把事件委托到document，也可以委托到目标元素的父元素； 像这个例子一样，需要为所有的p（包括点击按钮生成的p）添加元素的时候，把事件委托到document，然后在on方法的第二个参数上添加选择器，这样就相当于一次为多个元素绑定了事件，效率很快。 同时，假如只为一个元素添加事件， on方法也可以像bind方法那样高效，就像下面这样

$(#id).on(event,function);

四：delegate()

$(document).delegate("p","click",function(event){
    $(this).slideToggle();
});  //也可以为未来创建的元素绑定事件，这个例子中即点击button后添加的p元素也添加了这个事件；

delegate方法除了可以把事件委托到document，也可以委托到目标元素的父元素，与on方法的主要区别是参数的顺序刚好相反。

五：one() 这个比较特殊，用one绑定的事件只能执行一次，执行之后就会自动接触事件绑定； 代码如下：

$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});

总结： 尽量使用on()。。。。

转载于:https://my.oschina.net/daladida/blog/717755