JavaScript学习—jquery的bind-live-delegate区别

最新推荐文章于 2023-11-29 23:05:07 发布

losesw

最新推荐文章于 2023-11-29 23:05:07 发布

阅读量615

点赞数

分类专栏：使用方法 JavaScript Jquery

3 篇文章

订阅专栏

3 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细介绍了事件冒泡的概念及其在DOM树中的传播方式，并对比了jQuery中.bind(), .live() 和 .delegate() 函数的特点及应用场景，通过实例说明了不同事件绑定方法的性能差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件冒泡（也称作事件传递）

点击一个链接，触发绑定在链接元素上的click事件，触发绑定到这个元素的click事件的函数。然后，这个 click 事件会从DOM树向上传递，传播到父元素，然后传递给每一个祖先元素。在DOM树中，document 是根节点。

二、 Jquery的.bind()函数

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

JQuery的CSS选择器找到所有元素类型是‘a’的DOM对象，然后给匹配对象的 click 事件绑定处理函数。

$('a').unbind('click');

解除click事件绑定的函数。

.bind()函数使用缺陷：

1. 无法绑定处理函数到还不存在DOM元素的事件。使用$(‘a’).bind(…)，之后JavaScript脚本给页面新增DOM元素，新添加元素click事件不会绑定处理函数。

2. .bind()绑定处理函数到多个元素，性能不佳，需要每个元素单独绑定。无法绑定一个父元素监听所有后代（子）元素（不用绑定100个相同的处理函数到单独的元素）。

三、 Jquery的.live()函数

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

.live()函数绑定处理函数到$(document)元素（DOM的根元素），并把事件‘click’和元素类型‘a’作为函数的参数。若有事件冒泡到document节点的时候，检查这个事件是不是 click 事件，目标元素能不能匹配‘a’，如果两个条件都是真，处理函数执行。

四、 Jquery的.delegate()函数

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

JQuery的CSS选择器找到ID=container的对象，绑定处理函数到他的click 事件，事件‘click’和元素类型‘a’作为函数的参数。若有事件冒泡到 $(‘#container’)对象，检查事件是不是click，目标元素是不是类型为a，如果两者都符合，执行函数。

举例：

$('a').live('click',function() { blah() });

$(document).delegate('a','click',function() { blah() });

第二个方法执行效率高于第一个，因为第一个方法需要遍历整个文档（$(document)元素）查找$('a')对象，并保存为jQuery对象。第二个方法只需要存贮$(document)元素，这样不需要完全载入DOM元素，就能执行后面的处理函数。

举例：

[javascript] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="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>
</body>
</html>