jquery事件绑定方式.bind() .live() .delegate()用法介绍

基础

首先,图形化的HTML文档能帮助我们更好的理解。一个简单的HTML页面看起来应该像这样

事件冒泡(也称作事件传递)(Event bubbling aka event propagation)
点击一个链接,触发绑定在链接元素上的 click 事件,进而触发绑定到这个元素的click事件的函数。

 代码如下 复制代码

$('a').bind('click', function() { alert("That tickles!") });
  

所以一次点击会触发一个alert。

然后,这个 click 事件会从DOM树向上传递,传播到父元素,然后传递给每一个祖先元素。

在DOM树中, document 是根节点。
现在我们能容易的解释.bind(), .live(), 和 .delegate()之间的差别了

.bind()

 代码如下 复制代码

 $('a').bind('click', function() { alert("That tickles!") });

  
这是最直接的绑定方法。jQuery 扫描文档找到所有 $(‘a’) 元素,然后给每一个找到的元素的 click 事件绑定处理函数。

.live()

 代码如下 复制代码
$('a').live('click', function() { alert("That tickles!") });

  
jQuery绑定处理函数到 $(document) 元素,并把 ‘click’ 和 ‘a’ 作为函数的参数。有事件冒泡到document节点的时候,检查这个事件是不是 click 事件,target element能不能匹配 ‘a’ css选择器,如果两个条件都是true,处理函数执行。

live方法也可以绑定到指定的元素(或者说“上下文(context)”)而不用绑定到document,比如:

 代码如下 复制代码

 $('a', $('#container')[0]).live(...);
  
.delegate()

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

  
jQuery扫描文档找到 $(‘#container’),绑定处理函数到他的 click 事件,’a’ css选择器作为函数的参数。当有事件冒泡到 $(‘#container’),检查事件是不是 click,并检查target element是不是匹配css选择器,如果两者都符合,执行函数。

注意这次和 .live() 方法很相似,除了把事件绑定到特定元素与跟元素的区别。精明的JS’er 或许会总结成 $(‘a’).live() == $(document).delegate(‘a’),真的是这样吗? 不,不全是。

为什么 .delegate() 比 .live() 好
jQuery 的 delegate方法比 live 方法更应该成为首选有一个原因。考虑以下的场景:

 代码如下 复制代码
$('a').live('click', function() { blah() });
// or
$(document).delegate('a', 'click', function() { blah() });

  

速度
上面第二个执行比第一个快,因为第一个会遍历整个文档查找 $(‘a’) 元素,并保存为jQuery对象,但是live方法只需要传一个字符串参数’a'而已,$() 方法并不知道我们会用链式表达式在后面用上.live()。

delegate 方法就只需要找到并存贮 $(document)元素就够了。

有一种hack是在 $(document).ready()之外调用live方法,这样就会立即执行。这时候DOM还没有填充,也就不会查找元素或创建jQuery对象。

灵活性和链式语法
这方面live方法依然令人费解。想一下,它链在$(‘a’)对象,但实际上是在$(document)对象起作用。因为这个原因,在链式表达式中使用live让人很不安,我觉得live方法变成一个全局的jQuery方法 $.live(‘a’,…) 会更有意义。

只支持css选择器
最后,live方法有一个最大的缺点,只能用css选择器,用起来很不方便。

有关css选择器的缺点,参看 Exploring jQuery .live() and .die()。

原作者更新

为什么使用 .live() 或 .delegate() 而不用 .bind()
最后,bind 方法看起来更清晰,更直接,是吗?但是这里有两个原因我们推荐 delegate 或 live:

•绑定事件处理函数到还不存在DOM中的元素。 bind 方法直接绑定函数到每个单独的元素,不能绑定到还没有添加到页面里的元素,如果你写了$(‘a’).bind(…),然后用ajax给页面增加了新的链接,新添加的链接不会绑定事件。live 或 delegate 或者其它绑定到祖先元素的事件,让现在有的元素,或者以后增的元素都可以使用。
•绑定处理函数到一个元素或者少数几个元素,监听后代元素,而不是绑定100个相同的处理函数到单独的元素。这样更有性能优势。
阻止冒泡
最后注意一下事件冒泡。通常我们能用这样的方法阻止其他处理函数:

 代码如下 复制代码

$('a').bind('click', function(){   
    e.preventDefault();    
    //or    
    e.stopPropagation();
})
  

但是在这里,用 live 或 delegate 方法绑定的事件会一直传递到事件真正绑定的地方才会执行。这时其他的函数已经执行过了

时间: 2024-09-09 06:30:43

jquery事件绑定方式.bind() .live() .delegate()用法介绍的相关文章

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事件绑定用法详解_jquery

本文实例讲述了jQuery事件绑定.分享给大家供大家参考,具体如下: style.css *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { padding: 5px; background: #96E555; cursor: pointer } .content {

jQuery事件绑定和委托实例_jquery

本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one().   有时我们可能会像下面这样绑定一个事件: 复制代码 代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现:  1. on() 复

jQuery事件绑定方法学习总结(推荐)_jquery

对于jQuery中的事件绑定方法,主要有on().bind().delegate().live()等这几个方法.之前都是之前拿过来用,也知道有这么几个方法,但是不清楚这几个事件绑定方法之间的区别.平时用的最多的是on方法,今天打算整理一下. bind方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl

深入理解jQuery事件绑定_jquery

html: <a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> <button class="cBtn">button2</b

Js/jquery事件绑定的方法

通常的做法是把函数指针赋值给dom对象,例如:  代码如下 复制代码 function loadProcess() {     //do something } window.onload = loadProcess; 或 window.onload = function() {     //do something } 因为这种方法会出现覆盖的问题,因此采用此种方法可能会由于其他地方也对window对象onload事件绑定事件造成上述代码不会被执行.比较好的做法是通过attachEvent(针

jQuery事件绑定.on()简要概述及应用_jquery

前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意. 看源码发现bind()和delegate()都是由on()实现的.on()的描述如下: 复制代码 代码如下: .on( events [, selector ] [, data

jQuery 事件绑定(event)学习笔记

  本篇主要记录jQuery事件响应的处理 50. bind(type, data, fn)对所有选定的element判断事件,type是事件类型,data是参数,fn是事处理方法. eg:1. $("p").bind("click", function(){ alert( $(this).text() ); }); 2. function handler(event) { alert(event.data.foo); } $("p").bind

jQuery事件绑定on()与弹窗的例子

页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery的事件绑定on()方法实现. 如图,弹窗是js动态生成的,通过点击某个链接弹出,弹窗中的"立即去使用"链接点击后,实现的效果是关闭弹窗,并跳转到锚点. 这个a标签是: XHTML <a style="display:" title="立即去使用" target="_blank" gid=&q