- 浏览: 13636390 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择。
1.click()方法是我们经常使用的单击事件方法:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ $("a").click(function() { alert("hello"); }); }) </script>
当点击<a>时,输出hello。
2.click()方法是bind()方法的一种简单方法。在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。我们直接看看jQuery文档中的一个例子:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ var message = "left"; $("a").bind("click", function() { alert(message); return false; }); var message = "right"; $("a").bind("contextmenu", function() { alert(message); return false; }); }) </script>
上边代码中,无论是左键单击还是右键单击<a>输出总是"right"。为了解决这个问题,我们可以将message作为data参数传递到到bind()方法中,如下:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ var message = "left"; $("a").bind("click", { msg: message }, function(e) { alert(e.data.msg); return false; }); var message = "right"; $("a").bind("contextmenu", { msg: message }, function(e) { alert(e.data.msg); return false; }); }) </script>
这样当我们左键单击<a>时,输出"left";当右键单击<a>时,输出"right"。
可见,一般情况下我们使用click()方法就可以了,当需要处理上边这种情况时,我们要使用bind()方法。
他还可以同时绑定多个时间:
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ var message = "left"; $("a").bind("click", { msg: message }, function(e) { alert(e.data.msg); return false; }); var message = "right"; $("a").bind("contextmenu", { msg: message }, function(e) { alert(e.data.msg); return false; }); //同时绑定多个事件类型/处理程序 $("span").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} }); //你可以在事件处理之前传递一些附加的数据。 function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler) }) </script> <style>.entered{background:gray;}</style> </head> <body> <a href="##">==== tester ====</a> <span><<<< control-p >>>></span> <p style="height:200px;border:red 1px solid;" id="#foo">this is a test...</p> </body> </html>
3.live()给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。如下:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ $("div.live").bind("click", function() { alert("success"); }); }) </script>
此时,当点击class为live的div时,输出"success"。此时如果有一个新的元素添加了进来,如下:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ $("<div class="live" href="#">live</div>").appendTo("body"); }) </script>
这时,当使用上边方法点击class为live的a标签时,不会执行。原因在于,这个元素是在调用bind()之后添加的,而使用live()方法使得在后边添加的元素也能够执行相应的事件,如下:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ $("div.live").live("click", function() { alert("success"); }); }) </script>
这样,当我们单击class为live的a标签时,如果此a标签是后边添加的,也能照常输出"success"。至于原因,在这里不做具体的说明,本篇主要比较几种方法的区别。
最后,看看delegate()方法,这个方法到目前为止我自己还没有使用过,应该是在1.4.2中才有的。
live()方法的一个不足在于它不支持链式写法:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ $("#test").children("a").live("mouseover", function() { alert("hello"); }); }) </script>
上边这种写法并不会输出,我们使用delegate()可以写为:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ $("#test").delegate("a", "mouseover", function() { alert("hello"); }); }) </script>
这样就可以正常的输出我们想要的结果了。本篇总结了click()、bind()、live()和delegate()方法,其中并没有做非常详细的解释,仅望能对大家在具体使用时有所帮助。
原文:jQuery方法区别(四)click() bind() live() delegate()区别
.delegate()
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ $('#container').delegate('a', 'click', function() { alert("That tickles!") }); }) </script>
JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$('a').live() == $(document).delegate('a'),是这样吗?嗯,不,不完全是。
为什么.delegate()要比.live()好用
基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:
$('a').live('click', function() { blah() }); // 或者 $(document).delegate('a', 'click', function() { blah() });速度
后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断,但是$()函数并未知道被链接的方法将会是.live()。
而另一方面,delegate方法仅需要查找并存储$(document)元素。
一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。
灵活性和链能力
live函数也挺令人费解的。想想看,它被链到$(‘a’)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。
仅支持CSS选择器
最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。
为什么选择.live()或.delegate()而不是.bind()
毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:
为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。
如果你运行了$(‘a’).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。
停止传播
最后一个我想做的提醒与事件传播有关。通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:
$('a').bind('click', function(e) { e.preventDefault(); // 或者 e.stopPropagation(); });不过,当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。
来源: http://kb.cnblogs.com/page/94469/
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1176使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2261当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1174参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1011在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 941从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1549先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3295每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1201原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4457出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1339一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1557一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 821域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2273代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 716代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1591插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 504上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1179javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3571寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1102AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 690AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择。 1.click()方法是我们经常使用的单击事件方法: 代码如下:$(“a”).click(function(){ ...
其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事件类型时用空格分隔各个类型;eventData为Map类型,给出要传递给事件处理程序的数据,...
它们是live和delegate,事实上,这两个方法是bind方法的一个变体,在对于固定DOM对象时,我们通常使用bind就可以了,而对象动态产生的DOM对象,使用bind就无能为力了,这时live和delegate就出场了,呵呵。...
代码如下: $(‘a’).bind(‘click’,function(){alert(‘that tickles!’)}) 因此一个单击操作会触发alert函数的执行。 click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是...
对未来的元素绑定事件不能用bind, 1、可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了。 2、推荐用on代替(注:1.7及以上的版本才支持)。用法:on...
因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到朋友,如有不妥之处,希望指出、...
jQuery 事件 方法 jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。 方法 ...移除所有通过 live() 方法添加的事件处理
因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或...
因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个...
因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或...
jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。 有时我们可能会像下面这样绑定一个事件: 代码如下:$(“#div1”).click(function() { alert(...
jquery api官方的例子在新增的元素上添加事件 $[removed]("click",'#lyysb a'...自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。 注意:使用 on() 方法添加的事件处理程序适用于
$("button").click(function() {..some code... } ) 该方法隐藏所有 <p> 元素: $("p").hide(); 单独文件中的函数 如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到...
代码 $(document).ready(function() { $("#clear").click(function(){ alert("i am about to clear the table"); }); $("form[12]").submit(validate); }); function validate(){ //do some form ...
$.blur,.mousedown,.change,.mouseenter,.click,.mouseleave,.dblclick,.mousemove,.error,.mouseout,.focus,.mouseover,.focusin,.mouseup,.focusout,.resize,.keydown,.scroll,.keypress,.select,.keyup,.submit,....
live(type,[data],fn)1.7- die(type,[fn])1.7- delegate(s,[t],[d],fn) undelegate([s,[t],fn]) 事件切换 hover([over,]out) toggle([spe],[eas],[fn])1.9* 事件 blur([[data],fn]) change([[data],fn]) ...