jQuery绑定事件方法及区别(bind,click,on,live,one)

2020-05-16 18:41:02易采站长站整理

第一种方式:


$(document).ready(function(){
$("#clickme").click(function(){
alert("hello world click")
})
})

第二种方式(简写方式为第一种):


$('#clickmebind').bind("click", function(){
alert("Hello World bind");
});

第三种方式:


$('#clickmeon').on("click",function(){
alert("hello world on")
})

注意:第三种方式只适用于jquery 1.7以上的版本

第四种方式:


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

第五种方式:


$("div").delegate("button","click",function(){
$("p").slideToggle();
});

如果只绑定一次事件,那接着用one()吧,这个没有变化。


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

下面就来了解下它们之间的区别

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

$(“a”).bind(“click”,function(){alert(“ok”);});

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

$(“a”).live(“click”,function(){alert(“ok”);});

delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

$(“#container”).delegate(“a”,”click”,function(){alert(“ok”);})

on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数

最大的差别:bind()的事件函数只能针对已经存在的元素进行事件的设置。如果你想对动态创建的元素bind()事件,是没有办法达到效果的,但是live(),on(),delegate()均支持未来新添加元素的事件设置。

.bind()是直接绑定在元素上()
jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;

.delegate()则是更精确的小范围使用事件代理,性能优于.live()(在Jquery1.7中已经移除)

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document