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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
重置版游戏视频
2020/04/09 魔兽争霸
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
Javascript开发包大全整理
2006/12/22 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python简单文本处理的方法
2015/07/10 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
结构工程个人自荐信范文
2013/11/30 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
平遥古城导游词
2015/02/03 职场文书
校长新学期致辞
2015/07/30 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL