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


Posted in jQuery onAugust 14, 2017

第一种方式:

$(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实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
jQuery实现手势解锁密码特效
Aug 14 #jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
jQuery:unbind方法的使用详解
Aug 14 #jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
You might like
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
php源码的安装方法和实例
2019/09/26 PHP
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
python提取字典key列表的方法
2015/07/11 Python
Python切换pip安装源的方法详解
2016/11/18 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
python实现静态web服务器
2019/09/03 Python
Python API自动化框架总结
2019/11/12 Python
python空元组在all中返回结果详解
2020/12/15 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
大学自荐信
2013/12/12 职场文书
同事吵架检讨书
2014/02/05 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
什么是SOLID
2022/03/24 Javascript
mysql 排序失效
2022/05/20 MySQL