`
yushine
  • 浏览: 200770 次
  • 性别: 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() delegate() live()事件绑定

    在探讨jQuery中的`bind()`, `delegate()`, 和`live()`事件绑定方法的区别时,我们需要深入理解它们在处理DOM事件时的独特方式。这些方法在不同的场景下提供了灵活且高效的选择,帮助开发者创建响应式和动态的Web应用...

    jQuery中bind(),live(),delegate

    今天我们将深入探讨jQuery中的事件绑定方法,包括`bind()`, `live()`, `delegate()`,以及后来推出的`on()`方法。这四个方法都是为了帮助开发者更方便地管理页面上的事件,特别是对于动态生成的元素。 1. **bind()*...

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

    在jQuery库中,有四种主要的方法用于绑定事件处理程序:`.bind()`, `.live()`, `.delegate()`, 和 `.one()`。这些方法各有特点,适用于不同的场景,下面我们将逐一深入探讨它们的用法和区别。 1. **.bind() 方法** ...

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

    在讨论jQuery中的事件绑定方法时,.bind()、.live()和.delegate()是三种重要的技术。为了深入理解这些方法之间的区别和特点,首先需要对DOM事件的传播机制有所了解。在DOM事件模型中,事件传播分为捕获和冒泡两个...

    jQuery绑定事件方法及区别(bind,click,on,live,one)

    此外,`bind()`、`live()`和`delegate()`在某些早期版本的jQuery中不支持动态创建元素的事件绑定,而`on()`方法解决了这个问题。 了解了这些方法的使用和区别,可以帮助开发者在处理不同情况下的事件绑定时做出更...

    jquery事件代理方式的区别联系

    本文将深入探讨jQuery中的事件代理方式,包括`live`, `delegate`和`bind`的区别与联系。 ### 事件冒泡与事件代理原理 事件冒泡是指事件从最深的节点开始,逐级向上层节点传播事件的过程。当一个元素触发事件,该...

    jquery绑定事件 bind和on的用法与区别分析

    而 `on` 是从 jQuery 1.7 版本开始引入的,用来替代 `bind`、`live` 和 `delegate` 等事件处理方法。`on` 更加灵活,支持更多的功能,如事件委托。`on` 的基本语法如下: ```javascript $(selector).on(event, ...

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

    在jQuery中,绑定事件是...在jQuery 1.7之后,live方法已被deprecated,推荐使用delegate或on方法,它们提供了更强大的事件委托和更高效的事件处理。了解这些区别可以帮助开发者根据项目需求选择最合适的事件绑定方式。

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

    在jQuery中,click()、bind()、live()和delegate()都是用于绑定事件处理函数的方法,但它们之间存在一些关键的区别,适用于不同的场景。 1. `click()` `click()`是最常用的事件绑定方法,专门用于绑定点击事件。...

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

    - `on()` 是 jQuery 1.7 引入的统一事件绑定接口,替代了 `bind()`、`live()` 和 `delegate()`。 - 语法:`$(selector).on(events, selector, data, handler)` - `events`:必需,逗号分隔的事件名。 - `...

    JQuery调用绑定click事件的3种写法

    `.on()`是jQuery 1.7版本引入的新方法,它取代了`.bind()`、`.live()`和`.delegate()`,提供了更强大的功能。`.on()`方法可以处理当前及未来的元素(动态生成的元素)的事件,这使得它在处理动态内容时非常有用。...

    jquery中live()方法和bind()方法区别分析

    在 jQuery 1.7 之后,引入了 `on()` 和 `off()` 方法,这两个方法可以替代 `live()`、`bind()` 和 `delegate()` 方法,并且提供了更多的灵活性和强大的事件委托能力。例如,`$(document).on('click', '.selector', ...

    jQuery中 delegate使用的问题

    在旧版本的jQuery中,`live()` 也是一个类似的功能,但随着版本更新,`live()` 已经被弃用,现在推荐使用 `delegate()` 或 `on()`。 `delegate()` 的基本语法如上所述: ```javascript $(selector).delegate(child...

    jQuery的三种bind/One/Live/On事件绑定使用方法

    `on()`是jQuery 1.7引入的新事件绑定机制,它统一了`bind()`, `live()`, 和 `delegate()`的功能。`on()`提供了更大的灵活性,可以通过选择器限制事件的传播,同时支持动态绑定和事件委托。`on()`的参数结构如下: ...

    详解Jquery实现ready和bind事件

    `on`方法更为通用,可以用来替代`bind`、`live`和`delegate`方法。`on`方法的使用如下: ```javascript $(selector).on(eventType, selector, data, handler); ``` - `selector`:可选,用于选择内部的子元素进行...

    jQuery参考手册-事件总结

    12. **delegate()**: 类似于 `live()`,用于向匹配元素的后代元素添加事件处理器,已被 `on()` 替代。 13. **event对象**: 在事件处理函数内,`event` 对象提供了关于事件的详细信息,如 `event.type` (事件类型),...

Global site tag (gtag.js) - Google Analytics