zoukankan      html  css  js  c++  java
  • jq的.off解绑事件

    .off( events [, selector ] [, handler ] )

    描述:移除一个事件处理函数

    • events
      类型: String
      一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
    • selector
      类型: String
      一个选择器,当绑定事件处理程序时匹配最初传递给 .on()的那个。
    • handler
      类型: FunctionEvent eventObject )
      以前附加的事件处理函数,或特殊值false
       $("body").off("change", "click","#div2 .textbox-text").on("change", "#div2 .textbox-text", function (e) {
                      console.log(2)
      
                  })
      

        

      off() 方法移除用.on()绑定的事件处理程序。有关详细信息,请参阅该网页上delegated和directly绑定事件。可以通过提供组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除。

      如果一个简单的事件名称,比如提供"click",那么所有 这种类型的事件(包括直接和委派)从元素上被移除。对于写插件,或者基于大型代码而编程时,最好是通过名字空间进行事件绑定或移除操作,这样就不会意外的移除其它代码添加的事件处理函数。在一个特定的命名空间中的所有类型的事件,可以从一个元素中删除,只是提供了一个命名空间,比如 ".myPlugin"。在移除事件处理时,至少要提供名字空间或事件名。

      要删除特定的委派事件处理程序,需要提供一个selector 的参数。该选择器字符串必须与之前通过 .on() 进行事件处理绑定时使用的选择器相一致。若要移除元素上所有的代理事件,而不移除任何非代理事件,请使用特殊值 "**"。

      处理程序也可以删除handler参数指定名称的函数。当jQuery的绑定一个事件处理程序,它分配一个唯一的ID给处理函数。函数用jQuery.proxy()代理或类似有相同的唯一ID机制(代理函数),因此,通过代理处理程序.off 可能会删除比预期更多的处理程序。在这些情况下,最好是附加和移除事件处理程序,使用命名空间。

      .on()一样,你可以传递一个 events参数明确的指定而不是用events 和 handler作为单独参数。键是事件类型及可选的名字空间,值是绑定的处理函数,或者是特殊值false

      例子:

      Example: 为有颜色的按钮添加并移除事件处理。

      <!DOCTYPE html>
      <html>
      <head>
        <style>
      button { margin:5px; }
      button#theone { color:red; background:yellow; }
      </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
      </head>
      <body>
        <button id="theone">Does nothing...</button>
      <button id="bind">Add Click</button>
      <button id="unbind">Remove Click</button>
      <div style="display:none;">Click!</div>
      <script>
      function aClick() {
        $("div").show().fadeOut("slow");
      }
      $("#bind").click(function () {
        $("body").on("click", "#theone", aClick)
          .find("#theone").text("Can Click!");
      });
      $("#unbind").click(function () {
        $("body").off("click", "#theone", aClick)
          .find("#theone").text("Does nothing...");
      });
      </script>
       
      </body>
      </html>
      

        

      Example: 移除所有段落上的事件:

      $("p").off()
      

        

      Example: R移除所有段落上的代理事件:

      var foo = function () {
        // code to handle some kind of event
      };
       
      // ... now foo will be called when paragraphs are clicked ...
      $("body").on("click", "p", foo);
       
      // ... foo will no longer be called.
      $("body").off("click", "p", foo); 
      

        

      Example: 通过传入的第三个参数,仅移除先前绑定的事件处理函数:

      var foo = function () {
      // code to handle some kind of event
      };
       
      // ... now foo will be called when paragraphs are clicked ...
      $("body").on("click", "p", foo);
       
      // ... foo will no longer be called.
      $("body").off("click", "p", foo);

        

      Example: 通过指定名字空间,解除绑定表单上所有的代理事件:

      var validate = function () {
        // code to validate form entries
      };
       
      // delegate events under the ".validator" namespace
      $("form").on("click.validator", "button", validate);
       
      $("form").on("keypress.validator", "input[type='text']", validate);
       
      // remove event handlers in the ".validator" namespace
       
      $("form").off(".validator");
      

        

  • 相关阅读:
    图像检索(image retrieval)- 11
    图像检索(image retrieval)- 10相关
    Mock.js简易教程,脱离后端独立开发,实现增删改查功能
    Azure Monitor (3) 对虚拟机磁盘设置自定义监控
    Azure Monitor (1) 概述
    Azure SQL Managed Instance (2) 备份SQL MI
    Azure Virtual Network (17) Private Link演示
    Azure Virtual Network (16) Private Link
    Azure Virtual Network (15) Service Endpoint演示
    Azure Virtual Network (14) Service Endpoint服务终结点
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/8480434.html
Copyright © 2011-2022 走看看