jQuery bind 、delegate、live和on比较

JQuery的delegate()方法是给页面里的元素(或者页面里未来将会有的元素)绑定事件,同样的从结果来看JQuery的bind()方法同样也是给元素绑定事件,但是它(bind)只能给页面中当前已经存在的元素去绑定事件。

JQuery的live()方法同样也是给元素绑定事件,但是它(live)在页面有改动的时候,JQuery把相应函数绑定到$(document)元素上。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个绑定事件,以及该事件的目标元素与这一选择器是否匹配,如果都是的话,则执行函数。JQuery 1.7以后就不支持live()了。

JQuery的on()方法同样也是给元素绑定事件,它(on)是整合了之前的三种方式的新事件绑定机制。

例子:


<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("div").delegate("p","click",function(){

$(this).slideToggle();

});

$("button").click(function(){

$("<p>这是一个新段落。</p>").insertAfter("button");

});

});

</script>

</head>

<body>

<div style="background-color:yellow">

<p>这是一个段落。</p>

<p>请点击任意一个 p 元素,它会消失。包括本段落。</p>

<button>在本按钮后面插入一个新的 p 元素</button>

</div>

<p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>

</body>

</html>

标红的P是通过点击button才能被加载到页面的,也就是说,在document.ready的时候页面里还没有这个P元素,所以说需要用delegate()方法给P绑定事件,此时用click()或者bind()是做不到给可能被加载到这个页面的P元素绑定事件的。

但是这个button是页面中已经存在的,用click就可以给绑定上事件。当然了,用delegate()也行。

为什么选择.live()或.delegate()而不是.bind()

毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:

1. 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。

2. 如果你运行了$(‘a‘).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

3. 或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。

时间: 2024-11-05 17:25:45

jQuery bind 、delegate、live和on比较的相关文章

jQuery -&gt; bind / live / delegate 的终结者 - on

最近在学习jQuery,使用得是最新版本的1.11.1.照着书本敲了如下代码,却发现无论如何也跑不起来. html <div class="container"> <div class="box">hello world</div> </div> js $(document).ready(function() { $('.box').live('click', function() { $(this).clone().

jQuery的delegate()与proxy()方法

1. jQuery 事件 - delegate() 方法 定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). $("div").delegate("button","click",function(){ $("p").slideToggle();

jQuery 事件 - delegate() 方法 和live()方法

当点击鼠标时,隐藏或显示 p 元素: $("div").delegate("button","click",function(){ $("p").slideToggle(); }); delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). 向未来的元素添加事件处

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <

jquery bind 方法一个特点(绑定多个方法到一个dom的某个事件)

目录: [TOC] jquery bind方法介绍 方法声明:bind(type,[data],fn) 方法说明:为每一个匹配元素的特定事件(eg:click)绑定一个事件处理器函数.这个事件处理函数会通过参数方式接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为.如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false. 技巧:多数情况下,可以把事件处理器函数定义为匿名函数. 参数意义 type (String) : 事件类型. data (Object) : (可选

jquery bind()方法 语法

jquery bind()方法 语法 作用:bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 说明:规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数.直线电机生产厂家 语法:$(selector).bind(event,data,function) 参数: 参数 描述 event     必需.规定添加到元素的一个或多个事件.由空格分隔多个事件.必须是有效的事件. data     可选.规定传递到函数的额外数据. function   

jquery bind live delegate on

1.bind() $(selector).bind(event,[data],function) bind方法给每个$(selector)元素都注册一个事件处理函数,不支持未来增加的元素.上面两段代码等价的. $('p').bind('click',function(){ alert('p'); }); $('p").click(function(){ alert('p'); }); 2.live() $(selector).live(event,[data],function) live方法把

live(),bind(),delegate()等事件绑定方法的区别及应用解析

1 首先bind()方法是最直观的,但是也是弊端最大的. $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系,当我们点击了<a></a>标签时,会立马执行alert,但与此同时,click()事件会接着向DOM树的根方向传播,广播到父元素,由父元素向上到每个祖先元素,只要是它的某个后代元素上的click()事件被触发,那么整个dom树都会牵一发而动全身.所以对未来元素的绑定不能用bind. 2 li

jQuery 事件 - delegate() 方法

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("div").delegate("p","click"