jQuery off()方法
jQuery中的off()方法是用来移除与on()方法相连的事件处理程序。off()方法给API带来了很多的一致性,它取代了unbind(), die()和undelegate()方法。
语法:
$(selector).off(event, selector, function(eventObj), map)
参数:该方法接受上面提到的和下面描述的四个参数。
- event。它是必要参数,用于指定一个或多个事件或命名空间,以便从选定的元素中删除。多个事件用空格分隔。
- selector。它是可选的参数,用于在附加事件处理程序时与最初传递给on()方法的参数相匹配。
- function(eventObj)。它是可选参数,用于指定事件发生时要运行的函数。
- map:这个参数用来指定事件地图({event:function, event:function, …}),其中包含一个或多个元素的事件附件,以及事件发生时要运行的函数。
例子1:这个例子删除了事件处理程序。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery off() method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to remove event handler -->
<script>
(document).ready(function() {
("h3").on("click", function() {
(this).css("background-color", "green");
});
("button").click(function() {
$("h3").off("click");
});
});
</script>
</head>
<body>
<h3>GeeksforGeeks</h3>
<button>
Click to remove event handler
</button>
</body>
</html>
输出:
在点击元素h3之前:
点击元素h3后:。
实例2:本例使用animate事件来添加一次动画效果,然后删除事件处理程序。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery off() method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to animate the event -->
<script>
(document).ready(function() {
var x = 0;
("h3").click(function(event) {
("h3").animate({fontSize: "+=10px"
});
x++;
if (x >= 1) {
(this).off(event);
}
});
});
</script>
</head>
<body style="text-align:center;">
<h1>Welcome to GeeksforGeeks!.</h1>
<div style="background-color:green;">
<h3>
Geeks for Geeks. Click to increase
the size (only one time)
</h3>
</div>
</body>
</html>
输出 :
在点击标题之前:。
点击标题后:。