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之前：
jQuery off()方法
点击元素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>