浅谈jQuery中事情的动态绑定


Posted in Javascript onFebruary 12, 2017

在jQuery的开发过程中,我们往往需要处理各种事件,例如click(),hover()等。在jQuery的API中,我们可以使用不同的方法来将这些事件绑定到特定的元素中。今天这篇文章中,我们将要介绍如何使用bind(),on(),live()和delegate()方法来绑定特定的事件,什么情况下使用,什么情况下不适用它们。希望能够帮助大家更好的了解和使用jQuery的时间处理方法。

一、bind()方法

使用较早版本jQuery的教程或者应用中,我们往往使用bind()方法来将事件绑定到特定的元素上,如下:

<section id="container">
 <img class="scv" src="images/scv.gif" alt="Terran unit" />
</section>
$('.scv').bind('click', function(){
  $('#container').append('<img class="scv" src="images/scv.gif" alt="Terran unit" />');
});

如果你查看相关jQuery1.7.1最新文档的话,大家应该知道最新的jQuery中bind目前其实最后也是调用on()方法来实现的,所以呢,如果现在大家使用最新jQuery版本(目前为1.7.1)的话,尽量避免使用bind()方法。

如果大家点击运行这个示例肯定会发现,当点击第一个图片时,会生成新的图片,但是如果你点击新生成的图片,不会继续执行添加新图片的操作。为什么会这样呢? 因为使用bind绑定的元素是页面上所有存在的class="scv"的元素,新生成的元素添加到DOM,并没有绑定我们添加的click方法。那么怎么让新的图片也可以绑定我们click方法呢。我们可以使用clone()方法,如下:

$('.scv').bind('click', function(){
 $(this).clone(true).appendTo('#container');
});

我们这里使用clone方法来生成一个新的图片,并且添加到#container容器中。这里我们使用clone方法参数true,代表克隆的元素同时克隆绑定的方法。

二、live()方法

在老的jQuery版本中,我们有一个方法专门用来处理动态生成的元素的事件绑定-live(),使用live()方法可以将方法绑定的效果应用到已存在或者新创建的DOM元素。代码如下:

$('.scv').live('click', function(){
 $(this).clone().appendTo('#container');
});

live()调用过程如下:

我们首先将click方法绑定到了Document,然后,查找Document里是否有.scv这个元素。这个过程对于性能来说可能比较浪费,所以我们可以使用如下带参数方法优化方式:

$('.scv', '#container').live('click', function(){
 $(this).clone().appendTo('#container');
});

以上代码中我们使用#container作为绑定的上下文,jQuery将会在#container这个元素中查询.scv元素。

三、Delegate()方法

在最新的jQuery版本中,我们最好不要使用live()方法,因为它已经被放弃了,这里我们使用delegate方法来指定事件绑定的上下文,如下:

$('#container').delegate('.scv','click', function(){
  $(this).clone().appendTo('#container');
});

大家可以看到以上代码中,我们首先设定了方法绑定的上下文-#container,然后,寻找class为.scv的元素,再绑定click方法。

注意:这里克隆后添加到的元素应该是你定义的上下文,否则,新生成的图片绑定不上click方法。

四、on()方法

.on( events [, selector ] [, data ], handler(eventObject) )

这是jQuery官方给出的Api,其实在最新版本的jQuery类库中,所有以上方法在后面其实都是调用on()方法,所以,如果你开发最新版本的jQuery,完全可以使用on()方法来处理所有的事件绑定,避免过多的方法调用。如下:

$('.scv').on('click', function(){
  $(this).clone(true).appendTo('#container');

});

如果要保证你动态添加的东西可以绑定上handler,那么$("selector").on()中的selector应该是更高的级别,父div,body或者document等。

五、总结

总的来说,最新的jQuery版本中,所有的方法基本最后都使用on()方法来处理,如果你针对新版本的jQuery做开发,大家可以考虑使用delegate()和on()方法处理事件绑定,虽然以前方法也可以用,但是大都都已经退出历史舞台。

以上这篇浅谈jQuery中事情的动态绑定就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 #Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 #Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 #Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 #Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 #Javascript
超全面的vue.js使用总结
Feb 12 #Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 #Javascript
You might like
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
python求pi的方法
2014/10/08 Python
python版本的读写锁操作方法
2016/04/25 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
购房意向书范本
2014/04/01 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
就业协议书怎么填
2014/09/15 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android