既然存在绑定事件,那肯定也存在对应的解绑事件。绑定事件跟解绑事件是相反操作。在jQuery中,我们可以使用off()方法来解除元素绑定的事件。jQuery的off()方法,有点类似于JavaScript的removeEventListener()方法。
语法:
$().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("绿叶,给你初恋般的感觉")
})
//解绑事件
$("#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>
浏览器预览效果如图所示。
分析:
当我们点击【解绑】按钮后,就会把第一个按钮所绑定的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("绿叶,给你初恋般的感觉")
})
//解绑事件
$("#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>
浏览器预览效果如图所示。
分析:
当我们点击【解绑】按钮后,就会把第一个按钮所绑定的click事件解除。学了那么多,我们自然而然就会问:解除事件都有什么用呢?一般情况下我们都是添加完事件就算了,没必要去解除事件啊!其实大多数情况确实如此,但是不少情况下是必须要解除事件的。
实际开发中,像拖拽效果这种效果,我们在mouseup事件中就必须要解除mousemove事件,如果没有解除就会有bug。当然,拖拽效果是比较复杂的,这里不详细展开。对于解除事件,我们学到后面就知道它有什么用了。