前面讲 on() 方法时提过，既然有绑定，就得有对应的解绑。off() 方法就是用来移除通过 on() 绑定的事件处理器的。它整合了早期版本中 unbind()、undelegate() 和 die() 三个方法的功能，让事件移除操作也变得统一规范。写代码最怕的就是事件绑定只增不减，之后导致内存泄漏或者意料之外的重复触发，off() 就是专门来帮你收拾这种场面的。
语法与参数定义
off() 方法的完整写法如下：
$(selector).off(event, selector, function(eventObj), map)
四个参数中只有 event 是必填项，其余都可以按需传入。event 用来指定要移除的事件类型，如果要一次性移除多个事件，用空格分隔，比如 "mouseover click"。第二个 selector 参数需要和当初 on() 绑定事件委托时传入的子元素选择器保持一致，这样才能精确移除特定的委托事件。function(eventObj) 用于指定要移除的具名处理函数，如果你当初绑定事件时用的是匿名函数，那就没法通过这个参数来精确卸载了，这一点很关键，后续会详细说。map 则是事件映射对象。
off() 还有一个很灵活的特性：如果不传任何参数直接调用 $(selector).off()，会把选中元素上所有已绑定的事件处理器全部清除干净。这种用法在元素即将从 DOM 中移除时尤其管用。
示例一：移除指定事件，对比效果一目了然
这个例子直观展示了 off() 的实际效果。页面上有两个 h3 标题和一个移除按钮。初始状态下，两个 h3 都绑定了 mouseover 事件，鼠标移上去会改变背景色和字号。点击移除按钮后，mouseover 事件被解绑，之后再悬停任何一个 h3 都不会有反应了。
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("h3").on("mouseover",function(){
$(this).css({"background-color": "yellow", "font-size": "25px"});
});
$("#b3").click(function(){
$("h3").off("mouseover");
});
});
</script>
</head>
<body>
<h2> 代码号学习编程：off() 方法实战 </h2>
<p> 将光标移到下方标题上触发悬停事件。 </p>
<h3> 悬停我试试 </h3>
<button id = "b3"> 移除事件 </button>
<h3> 悬停我试试 </h3>
</body>
</html>
一个常见的应用场景就是切换开关，打开时绑定事件，关闭时用 off() 解绑，保持交互状态和视觉状态同步。
示例二：限制触发次数后自动解除绑定
这个例子会展示一个比较实用的用法：让某个事件只能触发有限的次数，达到上限后自动调用 off() 解除绑定。下面这个 h3 标题的点击事件被设计为只能生效三次，每次点击字号增大一点，同时计数器累加，满三次后直接在事件处理函数内部把自己卸载掉。
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var i = 0, j = 1;
$("h3").click(function(e){
$("h3").animate({fontSize: "+=4.5px"}).text(j + " 次");
i++;
j++;
if (i >= 3) {
$(this).off(e);
}
});
});
</script>
</head>
<body>
<h2> 代码号学习编程：限制触发次数 </h2>
<p> 下方标题的字号只能放大三次。</br> 点击文字查看效果。 </p>
<h3> 点击我 </h3>
</body>
</html>
注意这里 $(this).off(e) 的写法，e 是事件对象，off() 能根据它自动识别要移除的是哪个事件类型。这种在事件处理器内部自己解绑自己的做法，在一次互效果、新手引导遮罩这类只执行一次的功能里很有用。
本节课程知识要点
这里分享一个我在开发中踩过的坑。用 on() 绑定事件时如果用的是匿名函数，后面想用 off() 单独把这个函数解绑，是做不到的，因为你拿不出函数引用。解决办法要么给 on() 传入具名函数，要么在不需要精确到函数级别时，直接 off("click") 解绑整个事件类型。事件委托的解绑也要留意，如果你当初是 $("body").on("click", ".item", handler) 这样绑定的委托，解绑时得写成 $("body").off("click", ".item") 或者再传入 handler 引用才能精确控制。如果只是写 $(".item").off("click")，那是解不掉的，因为事件根本没绑在 .item 自己身上。
