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 ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jquery实现拖拽小方块效果
Dec 10 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的安全
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
php画图实例
2014/11/05 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python 下划线的不同用法
2020/10/24 Python
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
大学生毕业求职自荐书范文
2014/02/04 职场文书
个人年终总结开头
2015/03/06 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python