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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 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 中的str_replace 函数总结
2007/04/27 PHP
php mssql 时间格式问题
2009/01/13 PHP
php whois查询API制作方法
2011/06/23 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
删除重复数据的算法
2006/11/23 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
angular2模块和共享模块详解
2018/04/08 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python结合API实现即时天气信息
2016/01/19 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
德国网上超市:myTime.de
2019/08/26 全球购物
高中运动会入场词
2014/02/14 职场文书
村干部承诺书
2014/03/28 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
物资采购方案
2014/06/12 职场文书
大学军训口号大全
2015/12/24 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫