事件绑定，将事件绑定到指定元素上，使得元素能对各种事件做出对应的反应，如点击事件。
本文目录：
- on()；
- off()；
- one()。
on(events, childSelector, data, handler)
为所选元素添加一个或多个事件处理函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| events | String | 必选。一个或多个空格分隔的事件类型和可选的命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。 |
| childSelector | String | 可选。只能是所选元素的子元素。 |
| data | Object | 可选。传递给函数的额外数据。 |
| handler | Function | 必选。事件触发时执行的函数。 |
off(events, selector, handler)
为所选元素移除一个或多个通过 on() 方法添加的事件处理函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| events | String | 必选。一个或多个空格分隔的事件类型和可选的命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。 |
| selector | String | 可选。添加事件处理函数时最初传递给 on() 方法的选择器。 |
| handler | Function | 可选。事件触发时执行的函数。 |
下面的例子是这样的，点击按钮 <code>on()</code>，给 “段落1” 和 “段落2” 添加 <code>click</code> 事件，点击按钮 <code>off()</code>，移除 “段落1” 上的点击事件。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>on()和off()</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<p>段落2</p>
<button id="btn1">on()</button>
<button id="btn2">off()</button>
<script>
$(function () {
// on()
$("#btn1").click(function () {
$("div").on("click", "p", {msg: "段落1"}, function (recv) {
alert(recv.data.msg);
});
$("p").last().on("click", function () {
alert("段落2");
});
});
// off()
$("#btn2").click(function () {
$("div").off("click", "p");
});
});
</script>
</body>
</html>
效果演示：
on()和off().gif
one(events, data, handler)
为所选元素添加一个或多个事件处理函数，所添加的事件处理函数在该元素上最多只执行一次。
| 参数 | 类型 | 描述 |
|---|---|---|
| events | String | 必选。一个或多个空格分隔的事件类型和可选的命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。 |
| data | Object | 可选。传递给函数的额外数据。 |
| handler | Function | 必选。事件触发时执行的函数。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件09_one()</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<p>这是一个段落。</p>
<button>one()</button>
<script>
$(function () {
$("button").click(function () {
$("p").one("click", {msg: "one()"}, function (recv) {
alert(recv.data.msg);
});
});
});
</script>
</body>
</html>
效果演示：
one().gif
网友评论