jQuery off()方法

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后:
jQuery off()方法

实例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>

输出 :
在点击标题之前:
jQuery off()方法
点击标题后:
jQuery off()方法

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程