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-data的三种用法
Apr 18 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jquery实现上传文件进度条
Mar 26 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
文件系统基本操作类
2006/11/23 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php实现读取内存顺序号
2015/03/29 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
为python设置socket代理的方法
2015/01/14 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Django 自动生成api接口文档教程
2019/11/19 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
Python3如何判断三角形的类型
2020/04/12 Python
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
建筑专业自荐信
2013/10/18 职场文书
工作鉴定评语
2014/05/04 职场文书
学雷锋标语
2014/06/25 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书