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

针对“Query中click(),bind(),live(),delegate()的区别”，我会提供完整的攻略，包括含义、用法、区别，以及举例说明。

概述

首先让我们来看一下这四个方法的含义：

click(): 绑定一个点击事件到一个元素上
bind(): 为指定元素添加一个或多个事件处理程序
live(): 为匹配选择器的元素绑定事件处理函数，即对动态添加的元素有效
delegate(): 基于所选元素的子元素执行一个事件，即可对动态添加的元素绑定事件处理函数

这些方法都用于绑定事件处理程序，但它们各自有各自的特点。

区别

click()方法

click() 方法触发元素的点击事件。它用于绑定单击事件处理程序。只有当页面加载完毕时存在该元素时，才能绑定该处理程序。

bind()方法

bind() 方法允许我们附加事件处理程序到单个元素。为指定元素添加一个或多个事件处理程序。当页面上的元素由于某种原因被删除时，没法再触发绑定的事件。所以这个方法对于动态添加到页面上的元素没法起作用。

live()方法

live() 方法使得代码更具灵活性,更自动. 他可以为匹配选择器的元素绑定事件处理程序，即对动态添加的元素有效. 无论何时,只要匹配选择器的元素存在，事件处理程序都会存在.

以下是一个示例：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function () {
    $("#live_click").live("click", function () {
        alert("I am from live click");
    });
});
</script>
</head>
<body>
<button id='live_click'>Live Click Button</button>
<button id='static_click'>Static Click Button</button>
</body>
</html>

delegate()方法

delegate()用于基于所选元素的子元素执行一个事件，即可对动态添加的元素绑定事件处理函数。几乎与live()方法相同，但更具有可读性和可维护性。

以下是示例：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function () {
    $("#delegate_div").delegate("#delegate_click", "click", function () {
        alert("I am from delegate click");
    });
});
</script>
</head>
<body>
<div id='delegate_div'>
   <button id='delegate_click'>Delegate Click Button</button>
</div>
<button id='static_click'>Static Click Button</button>
</body>
</html>

总结

点击事件是网页中最常见的元素交互方式之一，方法也很多，当然这四种方法也是比较常用的，它们之间有些细微的差别，选择不同的方法可以满足不同的需求。我相信在了解了这些知识点之后，读者对于它们的应用会有了更加清晰的认识。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Query中click(),bind(),live(),delegate()的区别 - Python技术站

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

概述

区别

click()方法

bind()方法

live()方法

delegate()方法

总结

相关文章