事件绑定让页面有了交互能力，但有些场景下我们需要主动解除这些绑定。比如一个按钮在特定条件下不应该再响应点击，或者一个鼠标悬停效果在某个操作后需要失效。unbind() 方法就是用来干这件事的——它可以移除通过 bind() 绑定的一个、多个或全部事件处理器。
和 bind() 一样，unbind() 在新版本 jQuery 中也被 off() 方法所取代。不过理解它的工作机制对于掌握事件绑定与解绑的完整链路很有帮助，特别是在维护老项目的代码时会经常遇到。
语法形式
$(selector).unbind(event, function, eventObj)
三个参数都是可选的，可以灵活组合：
event（可选）： 要移除的事件类型，比如 "click"、"mouseover"。移除多个事件时用空格分隔。不传这个参数会移除元素上的所有事件处理器。
function（可选）： 指定要移除的具体函数引用。当同一个事件绑了多个不同的处理函数，只想移除其中某一个时用这个参数。
eventObj（可选）： 来自事件绑定时的 event 对象，可用于在事件处理函数内部解除自身。
如果不传任何参数，unbind() 会移除元素上通过 bind() 绑定的所有事件处理器，一键清空。
示例一：绑定后手动解除事件
下面这个例子演示了 bind() 和 unbind() 配合使用的基本模式。页面上有两个标题和按钮，鼠标移入标题会触发样式变化。点击按钮后解除事件，之后鼠标再移入标题就不会有任何反应了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>unbind() 基础示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>jQuery unbind() 方法演示</h2>
<p>将鼠标移到下方标题上查看效果，然后点击按钮解除事件：</p>
<h3 class="hover-target">鼠标移到我上面</h3>
<button id="removeEventBtn">移除悬停事件</button>
<h3 class="hover-target">也移到我上面试试</h3>
<script>
$(document).ready(function(){
// 给所有 h3 绑定 mouseover 事件
$("h3.hover-target").bind("mouseover", function(){
$(this).css({
"background-color": "#f5b7b1",
"font-size": "25px"
}).text("已悬停");
});
// 点击按钮解除绑定
$("#removeEventBtn").click(function(){
$("h3.hover-target").unbind("mouseover");
});
});
</script>
</body>
</html>
操作顺序是这样的：先把鼠标移到第一个标题上，文字会变大、背景变粉。然后点击按钮解除事件。再把鼠标移到第二个标题上，什么都不会发生，因为 mouseover 事件已经被移除了。注意 unbind("mouseover") 只移除了 mouseover 事件，如果元素上还绑了其他类型的事件，它们不受影响。
示例二：用计数限制事件触发次数
unbind() 另一个实用场景是限制事件触发的次数。下面这个例子中，一个 div 方块被点击时会变大，但只能变大三次，第四次点击就不再有效果了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>unbind() 限制触发次数示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.click-box {
border: 4px solid #2471a3;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body>
<h2>unbind() 限制触发次数</h2>
<p>点击下方方块，样式只能改变三次：</p>
<div class="click-box">点我</div>
<script>
$(document).ready(function(){
var clickCount = 0;
var timesDisplay = 1;
$("div.click-box").click(function(e){
$("div.click-box").animate({
height: "+=25px",
width: "+=25px",
fontSize: "+=8px"
}).text(timesDisplay + " 次").css({
"color": "#1a5276",
"background-color": "#f9e79f"
});
clickCount++;
timesDisplay++;
if(clickCount >= 3){
$(this).unbind(e);
}
});
});
</script>
</body>
</html>
每次点击方块，它的宽高各增加 25px，字体增大 8px。clickCount 变量记录点击次数，当次数达到 3 时，$(this).unbind(e) 利用事件对象 e 解除当前这个 click 处理函数。第三次点击之后，方块停在最终状态不再变化。
这里 unbind(e) 的写法值得留意：直接把事件对象传进去，jQuery 能识别出当前正在执行的处理函数并把它从绑定列表中移除。这种方式适合在事件处理函数内部“自我销毁”，不需要在外部分别管理函数引用。
unbind 与 off 的对应关系
前面讲 bind() 时提到官方推荐用 on() 替代。同样地，unbind() 也被 off() 所取代。两者的对应关系很清楚：
// 用 bind 绑定，用 unbind 移除
$("p").bind("click", handler);
$("p").unbind("click", handler);
// 用 on 绑定，用 off 移除
$("p").on("click", handler);
$("p").off("click", handler);
迁移时把 bind 换 on，unbind 换 off，参数位置不变，逻辑兼容。新项目里建议统一用 on() 和 off() 这一对，保持代码风格一致。
本节课程知识要点
-
unbind()用于移除通过bind()绑定的事件处理器，可以移除指定的某个事件、某类事件或全部事件。 -
不传参数调用
unbind()会清空元素上所有通过bind()绑定的事件。 -
传入事件对象
e可以在处理函数内部解除自身绑定，适合实现“只触发 N 次就失效”的效果。 -
unbind()不会影响通过on()绑定的事件，两者使用不同的内部注册机制。 -
新版本 jQuery 推荐用
off()替代unbind()，功能覆盖且语法一致。
unbind() 是事件绑定生命周期里“解绑”这个环节的实现。配合 bind() 使用，形成了完整的事件挂载与移除链路。理解了 bind()/unbind() 这一对之后，再看 on()/off() 就很容易上手，因为它们的参数结构和设计思路一脉相承，只是后者能力更强、适用场景更广。事件管理的关键在于“该绑的时候绑，该解的时候解”，避免内存泄漏和意外触发，这一点无论用哪种方法都是一样的。
