`
rmzdb
  • 浏览: 81660 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

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

 
阅读更多

1. bind/Unbind
在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理。比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递。

$("#id").bind('click',function(){alert('tt!')});

其中bind的第一个参数代表的含义是:事件类型(注意不需要加on),function中的代码就是你要执行的逻辑 代码
多个事件绑定:bind还允许你绑定多个事件,事件名字之间用空格隔开,例如:

$('a').bind('click mouseover',function(){

在最新的jquery1.4版本中,对bind方法进行了改进,你可以在bind方法传入一个类JSON对象来一次绑定多 个事件处理函数。

$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a again!')}


在function函数中,你还可以通过传递一个javaScript对 象给function方法,这个事件对象通常是可以省略的。
bind中还有一个参数data, 该参数一般情况下很少使用,通常为了解决在同一个方法中处理同一个变量时有很好的处理。

var productname="Sports Shoes";
$('#Area').bind('click',function(){
alert(productname);
});

productname="necklace",
$('#Area').bind('click',function(){
alert(productname);
});


由于变量productname被重新赋值,所以输出的消息都是”necklace”,这里不了解可以去查阅下关于JavaScript的变量作用域,要 解决这个问题就必须使用到data参数,

var productname="Sports Shoes";
$('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);
});
productname="necklace",
$('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);
});


2. One
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。该方法与bind方法的参数一样,与bind方法的区别就是只对匹配元素的事 件处理执行一次,执行完之后,以后再也不会执行,当然重新发起web请求时它又会执行一次。

$('a').one('click',function(){
alert('a');
})


单击页面上的a元素后,弹出消息,除非用户发起第二次请求,否则再次点击a元素不会弹出消息对话框。


3. live
该方法主要是能处理动态添加的元素,给那些后添加的元素也一样绑定事件。

$('a').live('click,function(){
alert('show message!');
})

然后如果我添加一个元素,

$('body').appnend('Another Element');

那么该元素也会被触发事件处理函数alert。
另外,jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简化.bind(‘click’)。


一共有以下这些事件名称:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 等。

分享到:
评论

相关推荐

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

    本文将详细介绍jQuery中的三种事件绑定方法:bind、one和live,以及它们各自的特点和应用场景。 1. **bind**:`bind()` 是jQuery中最基础的事件绑定方法,它允许我们将事件处理器绑定到DOM元素上。例如,我们可以...

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

    然而,随着jQuery的发展,为了提供更高效和灵活的事件处理,出现了`one()`、`live()`以及后来的`on()`方法。 1. `bind()` `bind()`是jQuery中最早用于绑定事件的方法,它可以将一个或多个事件处理函数附加到指定...

    jQuery:bind() delegate() live()事件绑定

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

    jQuery中绑定事件bind() on() live() one()的异同

    在不同的版本中,jQuery 提供了多种方法来绑定事件,主要包括 bind()、on()、live() 和 one()。接下来,我们将详细探讨这些方法的相似点和不同点。 首先,让我们了解一下 bind() 方法。bind() 是 jQuery 中最传统的...

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

    本文将详细介绍在jQuery中绑定`click`事件的三种常见方法,以及它们的应用场景和差异。 ### 1. `click()`方法 这是最直接和最简单的绑定`click`事件的方式。当你希望为一个元素添加点击事件监听器时,可以使用`...

    jQuery中bind(),live(),delegate

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

    JQuery绑定事件

    3. **`.bind()`**、**`.live()`**、**`.delegate()`**:这些都是早期jQuery版本中使用的方法,虽然在新版本中已被`.on()`替代,但理解它们有助于了解jQuery的发展历程。其中,`.bind()`与`.on()`类似,`.live()`和`....

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

    为了解决这个问题,jQuery提供了一些机制来为未来元素绑定事件,比如`bind`、`live`、`on`和`.one()`方法。 首先,我们要认识到,`bind`方法是不可以用来绑定未来元素的事件的。这是因为在`bind`方法被调用的时候,...

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

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

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

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

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

    标题提到的`bind`和`live`都是jQuery中用于事件绑定的方法,它们虽然在功能上有相似之处,但在使用场景和性能上有所不同。以下是对这两个方法的详细解释和比较: 1. `bind()`方法: `bind()`是jQuery中最基础的...

    JQuery 动态删除添加html元素bind事件

    为了解决这个问题,可以使用`live()`或`on()`方法(jQuery 1.7+)来实现事件委托。在jQuery 1.3到1.9版本中,`livequery.js`插件被引入,它扩展了`live()`的功能,允许动态添加的元素也能够响应事件。但自jQuery 1.7...

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

    这三种方法都用于绑定事件处理器,但它们处理动态元素的方式不同。`bind`直接绑定到元素,不支持动态添加的元素;`live`全局监听,适合处理大量动态元素,但效率较低;`delegate`在指定的静态父元素上进行监听,兼顾...

    【JavaScript源代码】JQuery绑定事件四种实现方法解析.docx

    ### JavaScript源代码:JQuery绑定事件四种实现方法解析 #### 一、`bind` 方法 - **概述**:`bind` 方法是jQuery中用于绑定事件处理程序的基本方式之一。它允许开发者为DOM元素绑定特定类型的事件处理器。这种方法...

    jQuery事件绑定与解除绑定实现方法

    在这个匿名函数内部,我们看到`jQuery("div")`选择所有的`<div>`元素,然后使用`bind`方法将一个点击事件处理器绑定到它们: ```javascript jQuery("div").bind('click', function() { ... }); ``` 当用户点击...

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

    本文主要探讨了四个常用的事件绑定方法:bind(), live(), delegate(), 和 on(),并提供了实例来帮助理解它们的区别和用途。 1. **bind()**: - `bind()` 是最基础的事件绑定方法,用于向匹配的元素添加一个或多个...

Global site tag (gtag.js) - Google Analytics