jQuerybind()方法用于给选定的一个或多个元素解绑一个或事件处理程序。

我们还可以使用此方法删除所有或特定的事件处理程序。也可以用来停止指定的功能。

语法

$(selector).unbind(event,function,eventObj)

参数

  • event:它是一个可选参数。它指定要从元素中删除的一个或多个事件名。如果我们要移除多个事件，它们必须用空格分隔。
  • function :也是一个可选参数。此参数指定要与指定元素或事件解除绑定的函数名称。
  • eventObj:也是可选参数。来自事件绑定函数。

注意：当我们使用 unbind() 方法而不使用任何参数时，该方法将删除所有附加到元素的事件处理程序。

例子

例1

<!DOCTYPE html>
<html>
<head>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script>
   $(document).ready(function(){
   $("h3").bind("mouseover",function(){
	   $(this).css({"background-color": "pink", "font-size": "25px"}).text("悬停效果");
      });
      $("#b3").click(function(){
         $("h3").unbind("mouseover");
      });
   });
</script>
</head>
<body>
<h2> 这是一个使用 jQuery unbind() 方法的例子。 </h2>
<p> 将鼠标移动到下面的h3标题上以附加鼠标悬停事件。 </p>
<h3> 悬停 </h3>
<button id = "b3"> 删除鼠标悬停事件 </button>
<h3> 鼠标悬停事件 </h3>
</body>
</html>
例2 
 <!DOCTYPE html>
<html>
<head>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<style>
div{
	border: 5px solid blue;
	width: 50px;
	height: 50px;
}
</style>
<script>
$(document).ready(function(){
	var i = 0, j = 1;
	$("div").click(function(e){
		$("div").animate({height: "+=25px", width: "+=25px", fontSize: "+=10px"}).text(j + " 次").css({"color": "blue", "background-color": "yellow"});
		i++;
		j++;
		if (i >= 3) {
			$(this).unbind(e);
		}
	});
});
</script>
</head>
<body>
<h2> 这是一个使用 jQuery unbind() 方法的例子。 </h2>
<p> 以下标题的样式只能更改三次。 <br> 点击以下文字查看效果。 </p>
<div> 点击我 </div>
</body>

</html>