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实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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下MAIL的另一解决方案
2006/10/09 PHP
初品cakephp 入门基础
2012/02/16 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php函数连续调用实例分析
2015/07/30 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python中的两个内置模块介绍
2015/04/05 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
人力资源管理求职信
2014/08/07 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL