jquery中关于bind()方法的使用技巧分享


Posted in jQuery onMarch 30, 2017

.bind()方法可使用.on()方法来代替

on()方法提高代码易读性,如下

$("input").bind("click", { foo: "hello" }, handler);

$("input").on("click", { foo: "hello" }, handler);

bind()绑定事件的时候,这些元素必须已经存在,而on()可以处理类似于代理这样的东东,也就是说不存在的元素(动态生成的元素也可以处理),如下动态生成的 To do list ,再双击删除,可使用on()轻松完成,你会发现,on换成bind是不行的。

<input type="text" id="str">
<button id="btn">添加</button>
<h3>To do list</h3>
<ul></ul>
$(document).ready(function(){
 $('#btn').on('click',function(){
  var str = $('#str').val();
  $('<li>').text(str).appendTo('ul'); 
  $('#str').val('');
 })

 //To do list双击删除
 $(document).on('dblclick','li',function(){
  $(this).remove();
 })
});

on()事件绑定的妙用:我们经常要在网页里面处理大量的表格,假设表格有1000行,如果为每个tr都绑定一个click事件是非常占用内存的,而更加优雅的方法是:使用父元素tbody作事件代理,只需绑定一次,子孙元素tr上发生的事件会冒泡到tbody进行处理,节省开销

//效率低下的写法
$( "#dataTable tbody tr" ).on( "click", function() { \……

//换成优雅高效滴
$( "#dataTable tbody" ).on( "click", "tr", function() { \……

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jquery仿微信聊天界面
May 06 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
如何编写jquery插件
Mar 29 #jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
jQuery插件之validation插件
Mar 29 #jQuery
You might like
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
python3访问字典里的值实例方法
2020/11/18 Python
自荐信包含哪些内容
2013/10/30 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
电台广播稿范文
2015/08/19 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL