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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JS重载实现方法分析
2016/12/16 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
浅谈js闭包理解
2019/03/28 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
简单介绍Python中的RSS处理
2015/04/13 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
详解python的变量缓存机制
2021/01/24 Python
梅西百货官网:Macy’s
2020/08/04 全球购物
环保建议书600字
2014/05/14 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
召开会议通知范文
2015/04/15 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs