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

 更新时间:2017年08月14日 16:37:30   作者:Lemon_code  
这篇文章主要介绍了jq绑定事件方法及区别,通过五种绑定方式使用bind()进行操作,并和one()进行区分,需要的朋友可以参考下

第一种方式:

$(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
DOM节点上。和.bind()的优势是支持动态数据。(在Jquery1.7中已经移除,相应die()也移除)

live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制(在Jquery1.7中添加,相应off()也添加)

jquery1.4 及之前的版本,由.click() 或 bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM元素并不能响应之前绑定的事件!

旧版本的处理方法是使用.live()方法来代替事件绑定.bind(),使得绑定的事件能适用脚本创建的新元素。

但自jq1.7版本开始,官方已明文表示不再推荐使用使用.live()方法,官方解释为:live()调用过程首先将事件方法绑定到了Document,然后,查找Document里是否有匹配元素。
这个过程对于性能来说可能比较浪费。官方推荐将.live()改成Delegate()方法,适用脚本创建的新元素。

jq1.8开始,官方又再次申明:如果你开发最新版本的jQuery,完全可以使用on()方法来处理所有的事件绑定,避免过多的方法调用,因为其实在最新版本的jQuery类库中,所有以上旧版方法在后面其实都是调用on()方法。

总结

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。

以上就是小编为大家整理的jq绑定事件方法及区别的全部内容啦~希望大家继续支持脚本之家~

相关文章

  • jquery 抽奖小程序实现代码

    jquery 抽奖小程序实现代码

    这篇文章主要介绍了jquery 抽奖小程序的相关资料,这里提供了详细的思路及实现代码和实现效果图,需要的朋友可以参考下
    2016-10-10
  • 在css加载完毕后自动判断页面是否加入css或js文件

    在css加载完毕后自动判断页面是否加入css或js文件

    使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,具体实现代码如下
    2014-09-09
  • html中的input标签的checked属性jquery判断代码

    html中的input标签的checked属性jquery判断代码

    input 标签具有checked属性,而当input标签的type属性设为button时,如果给input标签的checked属性赋值时,在vs中会报错,提示 特性checked不是元素input的有效特性
    2012-09-09
  • jquery实现倒计时效果

    jquery实现倒计时效果

    这篇文章主要介绍了jquery实现倒计时效果,根据设计一个游戏引出的倒计时功能,需要的朋友可以参考下
    2015-12-12
  • 基于JQuery的实现图片轮播效果(焦点图)

    基于JQuery的实现图片轮播效果(焦点图)

    用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-JQuery实现图片轮播效果上体现的尤为出色。大大简化了js的代码。
    2010-09-09
  • json格式的javascript对象用法分析

    json格式的javascript对象用法分析

    这篇文章主要介绍了json格式的javascript对象用法,结合实例形式总结分析了javascript针对json格式数据操作的常见技巧,需要的朋友可以参考下
    2016-07-07
  • jquery下利用jsonp跨域访问实现方法

    jquery下利用jsonp跨域访问实现方法

    客户端的跨域访问,可以通过jsonp方式来实现,jquery提供了跨域访问的方法,jQuery.ajax()支持get方式的跨域。当然支持跨域还需要服务器端相应的处理。
    2010-07-07
  • jQuery Validate初步体验(一)

    jQuery Validate初步体验(一)

    jQuery 是一个快速、简单的JavaScript library, 它简化了HTML 文件的traversing,事件处理、动画、Ajax 互动,从而方便了网页制作的快速发展。 jQuery 是为改变你编写JavaScript 的方式而设计的,本文给大家分享jquery validate初步体验(一),感兴趣的朋友一起学习吧
    2015-12-12
  • jQuery contains过滤器实现精确匹配使用方法

    jQuery contains过滤器实现精确匹配使用方法

    contains 选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素
    2013-04-04
  • 使用jquery为table动态添加行的实现代码

    使用jquery为table动态添加行的实现代码

    最近,有需要做一个动态的给table,添加行,用了点时间,算是做成了。已测试过,但如果发现有什么bug,可以留言,欢迎拍砖。大家一起进步。
    2011-03-03

最新评论