既然存在绑定事件，那肯定也存在对应的解绑事件。绑定事件和解绑事件是相反的操作。在 jQuery 中，我们可以使用 off() 方法来解除元素绑定的事件。jQuery 的 off() 方法，有点类似于 JavaScript 的 removeEventListener() 方法。
图 1：解除使用“基本事件”方式添加的事件
图 2：解除使用“绑定事件”方式添加的事件
语法：
$().off(type)
type 是可选参数，它是一个字符串，表示事件类型。例如单击事件是 "click"，按下事件是 "mousedown"，以此类推。如果参数被省略，就表示移除当前元素中的所有事件。
off() 方法不仅可以用来解除使用“基本事件”方式添加的事件，还可以用来解除使用“绑定事件”方式添加的事件。
举例：解除使用“基本事件”方式添加的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
//添加事件
$("#btn").click(function(){
alert("C语言中文网，给你初恋般的感觉")
})
//解绑事件
$("#btn_off").click(function(){
$("#btn").off("click");
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"><br/>
<input id="btn_off" type="button" value="解除"/>
</body>
</html>
预览效果如图 1 所示。
图 1：解除使用“基本事件”方式添加的事件
当我们点击【解除】按钮后，就会把第一个按钮所绑定的 click 事件解除。
举例：解除使用“绑定事件”方式添加的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
input{margin-bottom: 6px;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
//添加事件
$("#btn").on("click", function(){
alert("C语言中文网，给你初恋般的感觉")
})
//解绑事件
$("#btn_off").click(function(){
$("#btn").off("click");
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"><br/>
<input id="btn_off" type="button" value="解除"/>
</body>
</html>
预览效果如图 2 所示。
图 2：解除使用“绑定事件”方式添加的事件
当我们点击【解除】按钮后，就会把第一个按钮所绑定的 click 事件解除。学了那么多，我们自然而然就会问：解绑事件都有什么用呢？一般情况下我们都是添加完事件就行了，没必要去解除事件啊！其实大多数情况确实如此，但是还有不少情况是必须要解除事件的。
实际开发中，如果想要实现拖曳效果，我们在 mouseup 事件中就必须要解除 mousemove 事件，如果没有解除就会有 bug。当然，实现拖曳效果是比较复杂的，这里不详细展开。对于解绑事件，我们学到后面就会更清楚它的作用。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23831.html