off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。
off()函数主要用于解除由on()函数绑定的事件处理函数。
该函数属于jQuery对象(实例)。
语法
jQuery 1.7 新增该函数。其主要有以下两种形式的用法：
用法一：
jQueryObject.off( [ events [, selector ] [, handler ] ] )
用法二：
jQueryObject.off( eventsMap [, selector ] )
参数
参数
描述
events
可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”foc
在JavaScript的世界里，jQuery库极大地简化了DOM操作和事件处理。`on()`和`off()`是jQuery中的两个关键函数，分别用于事件绑定和解除绑定。本文将深入探讨这两个函数的用法及其在实际开发中的应用。
`on()`函数是jQuery 1.7版本引入的新功能，用于替代之前的老式事件绑定方法如`click()`, `mouseover()`等。它允许开发者更加灵活地处理事件，支持一次性事件、命名空间和动态元素的事件绑定。
1. `on()`函数的使用：
- 基本形式：`jQueryObject.on(events, selector, handler)`
- 参数说明：
- `events`：字符串，一个或多个空格分隔的事件类型，如"click", "mouseover"。
- `selector`：可选，jQuery选择器，限制事件仅对匹配的后代元素有效。
- `handler`：回调函数，当事件发生时执行。
例如，给页面中的所有按钮绑定点击事件：
```javascript
$("body").on("click", "button", function() {
// 处理点击事件的代码
});
```
2. `off()`函数用于移除已经通过`on()`绑定的事件处理函数。同样有两种主要的用法：
- 基本形式：`jQueryObject.off([events, [selector], [handler]])`
- 参数说明与`on()`类似，但它们是用来匹配之前绑定的事件和处理函数的。
例如，解除对所有按钮的点击事件绑定：
```javascript
$("body").off("click", "button");
```
3. 关键点：
- 如果`selector`未提供或为`null`，`off()`会移除当前元素上所有匹配`events`的事件处理函数。
- 如果`handler`未提供，所有绑定到`events`的处理函数都会被移除。
- 如果所有参数都省略，那么所有事件处理函数都会从所有元素上移除。
- `off()`的选择器必须与`on()`绑定时使用的相同，才能正确解除特定事件。
4. 示例：
```javascript
var $body = $("body");
$body.on("click", "#btn1", btnClick1);
$body.on("click", "#btn2", btnClick2);
$body.on("click mouseover mouseleave", "a", function(event) {
if (event.type === "click") {
$body.off("click", "#btn1");
} else if (event.type === "mouseover") {
$(this).css("color", "red");
} else {
$(this).css("color", "blue");
}
});
$body.off("click", ":button", btnClick2); // 解除所有按钮的点击事件
```
注意，`$body.off("click", ":button");`无法移除`#btn1`的点击事件，因为`:button`选择器不匹配`on()`时的`#btn1`。
5. 应用场景：
- 当需要动态添加或删除DOM元素时，使用`on()`来绑定事件，因为它可以处理未来存在的元素。
- 使用命名空间来组织和管理事件，例如`"click.ns"`，这样可以方便地只解除特定命名空间下的事件。
- 在某些性能敏感的场景下，使用`off()`可以减少不必要的事件处理，提高效率。
`on()`和`off()`是jQuery中用于事件处理的核心工具，它们使事件绑定和解除变得简单而高效。正确理解和使用这两个函数，可以大大提高代码的可维护性和性能。
