`
yushine
  • 浏览: 196797 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

jQuery:click() bind() live() delegate()区别

 
阅读更多
click(),bind(),live()执行事件方法区别:
1.click()方法是我们经常使用的单击事件方法:
$("a").click(function() {
   alert("hello");
});

当点击<a>时,输出hello。
2.click()方法是bind()方法的一种简单方法。在bind()中,jQuery所有JavaScript事件对象,比如focus,
mouseover, 和 resize,都是可以作为type参数传递进来的。例:

var message = "left";
$("a").bind("click", function() {
   alert(message);
   return false;
});

var message = "right";
$("a").bind("contextmenu", function() {
   alert(message);
   return false;
});

上边代码无论是左键单击还是右键单击<a>输出总是"right"。为了解决这个问题,我们可以将message作为
data参数传递到到bind()方法中,如下:

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;
});

这样当我们左键单击<a>时,输出"left";当右键单击<a>时,输出"right"。

一般情况下我们使用click()方法就可以了,当需要处理上边这种情况时,我们要使用bind()方法。
3.live()给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。如下:

$("div.live").bind("click", function() {
   alert("success");
});

此时,当点击class为live的div时,输出"success"。此时如果有一个新的元素添加了进来,如下:


$("<div class="live" href="#">live</div>").appendTo("body");

这时,当使用上边方法点击class为live的a标签时,不会执行。原因在于,这个元素是在调用bind()之后添加的

,而使用live()方法使得在后边添加的元素也能够执行相应的事件,如下:


$("div.live").live("click", function() {
   alert("success");
});

这样,当我们单击class为live的a标签时,如果此a标签是后边添加的,也能照常输出"success"。至于原因,在

这里不做具体的说明,本篇主要比较几种方法的区别。
最后,看看delegate()方法,这个方法到目前为止我自己还没有使用过,应该是在1.4.2中才有的。

live()方法的一个不足在于它不支持链式写法:


$("#test").children("a").live("mouseover", function() {
    alert("hello");
});

上边这种写法并不会输出,我们使用delegate()可以写为:


$("#test").delegate("a", "mouseover", function() {
    alert("hello");
});
分享到:
评论

相关推荐

    jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。 .bind(eventType[, evnetData], Handler(eventObject)) 其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如...

    Query中click(),bind(),live(),delegate()的区别

    click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择。 1.click()方法是我们经常使用的单击事件方法: 代码如下:$(“a”).click(function(){ ...

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    代码如下: $(‘a’).bind(‘click’,function(){alert&#40;‘that tickles!’&#41;}) 因此一个单击操作会触发alert函数的执行。 click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是...

    jquery插件使用方法大全

    Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理...

    jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1、可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了。 2、推荐用on代替(注:1.7及以上的版本才支持)。用法:on...

    关于Jquery中的事件绑定总结

    因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到朋友,如有不妥之处,希望指出、...

    JS delegate与live浅析

    在jquery里有两个方法可以用来绑定自动追加出来的DOM对象,它们是live和delegate,事实上,这两个方法是bind方法的一个变体,在对于固定DOM对象时,我们通常使用bind就可以了,而对象动态产生的DOM对象,...

    jQuery详细教程

    jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...

    jQuery 1.5 API 中文版

    $.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...

    jquery1.11.0手册

    jQuery 1.11.0 速查表 核心 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector ...

    jQuery事件绑定和委托实例

    jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。   有时我们可能会像下面这样绑定一个事件: 代码如下:$(“#div1”).click(function() {   alert&#40;...

    解决jQuery使用append添加的元素事件无效的问题

    jquery api官方的例子在新增的元素上添加事件 $[removed]("click",'#lyysb a'...自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。 注意:使用 on() 方法添加的事件处理程序适用于

    jQuery 事件 方法

    jQuery 事件 方法 jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。 方法 描述 bind() 向元素添加事件处理程序 blur() 添加/触发...

    关于jQuery新的事件绑定机制on()的使用技巧

    因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或...

    jquery新的绑定事件机制on方法的使用方法

    因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个...

    jQuery新的事件绑定机制on()示例应用

    因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或...

Global site tag (gtag.js) - Google Analytics