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

click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择。

1.click()方法是我们经常使用的单击事件方法:

复制代码 代码如下:

$("a").click(function(){
   alert("hello");
});

当点击<a>时,输出hello。

2.click()方法是bind()方法的一种简单方法。在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。我们直接看看jQuery文档中的一个例子:

复制代码 代码如下:

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

这样就可以正常的输出我们想要的结果了。本篇总结了click()、bind()、live()和delegate()方法,其中并没有做非常详细的解释,仅望能对大家在具体使用时有所帮助。

时间: 2024-11-03 21:56:18

Query中click(),bind(),live(),delegate()的区别_jquery的相关文章

jQuery事件绑定用法详解(附bind和live的区别)_jquery

本文实例分析了jQuery事件绑定用法.分享给大家供大家参考,具体如下: html: <a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> <button cl

关于Jquery中的bind(),on()绑定事件方式总结_jquery

一.bind() 使用方式:$(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,dblclick等: 单事件处理:例如 $(selector).bind("click",data,function); 多事件处理:1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function); 2.利用大括号灵活定

jQuery中click事件的定义和用法_jquery

本文实例讲述了jQuery中click事件的定义和用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. click()方法也可以绑定事件处理方法. 语法结构一: 触发click事件. 复制代码 代码如下: $(selector).click() 语法结构二: 为click事件绑定事件处理方法. 复制代码 代码如下: $(selector).click(data,function) 参数列表: 参数 描述 d

jQuery中的Deferred和promise 的区别_jquery

Deferred和Promise之间有什么区别呢? promise 一个promise就是一个由 异步函数返回的对象 .当你想要自己编写一个这样的函数时你需要使用一个deferred. var promise = $.ajax({ url: "/myServerScript" }); promise.done(mySuccessFunction); promise.fail(myErrorFunction); var promise = $.ajax({ url: "/myS

JQ中bind(),live(),delegate()事件方法的区别

 jQuery团队在1.7版本中发布了一个用于绑定事件的新方法叫做on.这个方法包含了下面所介绍的live, bind, 和 delegate的功能,允许我们通过传递不同的参数指定绑定事件的方式而不是通过不同的方法名. 基础知识   定义和用法 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 将事件和函数绑定到元素 规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数. 语法 $(selector).bind(event,data,func

jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解_jquery

本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

datagramsocket-flex中的socket通信里bind()与connect()的区别

问题描述 flex中的socket通信里bind()与connect()的区别 根据api里的描述, bind(localPort:int = 0, localAddress:String = "0.0.0.0"):void 将此套接字绑定到指定的本地地址和端口. connect(remoteAddress:String, remotePort:int):void 将套接字连接到指定的远程地址和端口. 那么 q1:他们仅仅是分别绑定本地地址和连接远程地址的区别吗? q2:如果在指定本地

浅谈jquery中delegate()与live()_jquery

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序 例如给id是showspan的div中的span标签添加事件 <div id="showspan"><span>showspan**showspan</span></div> <span>outspan</span> <SCRIPT LANGUAGE="JavaScript"> <!--

Jquery绑定事件(bind和live的区别介绍)_jquery

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要