极客教程jQuery off
jQuery off() 方法是用来移除通过 on() 方法添加的事件处理程序。它是 jQuery 提供的一个重要的事件处理方法之一。通过这个方法，我们可以轻松地移除掉不需要的事件监听器，从而避免出现多余的事件响应。
语法
$(selector).off(event, selector, handler)
参数说明：
- event: 必需，指定要移除的事件类型。可以是一个或多个事件类型，使用空格分隔。
- selector: 可选，指定要移除事件监听器的元素。如果未指定，则移除所有函数中对该事件类型的监听器。
- handler: 可选，指定要移除的事件处理函数。如果未指定，则移除指定类型的所有事件处理函数。
示例
// HTML
<button id="btn">点击我</button>
// JavaScript
("#btn").on("click", function () {
alert("Hello World!");
});("#btn").off("click");
输出：点击按钮后不再弹出”Hello World!”的提示框。
使用方法
移除指定事件监听器
通过指定事件类型和事件处理函数，我们可以移除指定的事件监听器。下面是一个示例，我们通过点击按钮时在控制台打印信息，然后通过 off() 方法移除事件监听器。
// HTML
<button id="btn">点击我</button>
// JavaScript
function handleClick() {
console.log("按钮被点击了");
}
("#btn").on("click", handleClick);
// 5秒后移除事件监听器
setTimeout(function () {("#btn").off("click", handleClick);
}, 5000);
运行结果：点击按钮会在控制台打印出”按钮被点击了”，5秒后按钮点击不再触发事件。
移除所有事件监听器
如果我们不传入事件处理函数参数，即不指定要移除的事件处理函数，那么 off() 方法将移除指定类型的所有事件处理函数。下面是一个示例，我们在按钮上绑定了两个点击事件处理函数，然后使用 off() 方法将它们都移除。
// HTML
<button id="btn">点击我</button>
// JavaScript
function handleClick1() {
console.log("处理函数1");
}
function handleClick2() {
console.log("处理函数2");
}
("#btn").on("click", handleClick1);("#btn").on("click", handleClick2);
// 移除按钮的所有点击事件处理函数
$("#btn").off("click");
运行结果：点击按钮不会在控制台打印任何信息。
移除特定元素上的事件监听器
在某些情况下，我们可能希望只移除指定元素上的事件监听器，而不是移除所有元素上的事件监听器。在 off() 方法的第二个参数中，我们可以提供一个元素选择器来指定要移除事件监听器的元素。只有匹配该选择器的元素上的事件监听器才会被移除。
// HTML
<div class="container">
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
</div>
// JavaScript
function handleClick() {
console.log("按钮被点击了");
}
(".btn").on("click", handleClick);
// 移除容器元素下第一个按钮的点击事件处理函数(".container").off("click", ".btn:first-child");
运行结果：点击第二个按钮会在控制台打印出”按钮被点击了”，而点击第一个按钮则不会产生任何效果。
移除多个事件类型的事件监听器
如果我们想移除多个事件类型的事件监听器，可以在事件类型之间使用空格分隔。下面是一个示例，我们将移除按钮上的所有点击和鼠标移入事件监听器。
// HTML
<button id="btn">点击我</button>
// JavaScript
function handleClick() {
console.log("按钮被点击了");
}
function handleMouseEnter() {
console.log("鼠标移入按钮");
}
("#btn").on("click mouseenter", handleClick);("#btn").on("mouseenter", handleMouseEnter);
// 移除按钮上的点击和鼠标移入事件监听器
$("#btn").off("click mouseenter");
运行结果：点击按钮或鼠标移入按钮时不会在控制台打印任何信息。
总结
通过 jQuery 的 off() 方法，我们可以轻松地移除不需要的事件监听器，避免多余的事件响应。我们可以根据需要移除指定的事件处理函数，也可以移除所有事件监听器。另外，我们还可以通过指定元素选择器只移除特定元素上的事件监听器。这些灵活的用法可以帮助我们更好地管理和控制事件处理程序，提升网页的性能和用户体验。