美文网首页
事件的取消与添加

事件的取消与添加

作者: 北街九条狗 | 来源:发表于2019-09-17 13:51 被阅读0次

    .bind ( ) 添加事件

    $(selector).bind(event,data,function);
    
    参数 描述
    event 必需。规定添加到元素的一个或多个事件。

    由空格分隔多个事件。必须是有效的事件。
    data 可选。规定传递到函数的额外数据。
    function 必需。规定当事件发生时运行的函数。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").bind("click",function(){
        $("p").slideToggle();
      });
    });
    </script>
    </head>
    <body>
    <p>This is a paragraph.</p>
    <button>请点击这里</button>
    </body>
    </html>
    
    $(selector).bind({event:function, event:function, ...});
    
    参数 描述
    {event:function, event:function, ...} 必需。规定事件映射,其中包含一个或多个添加到元素的事件,以及当事件发生时运行的函数。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").bind({
        click:function(){$("p").slideToggle();},
        mouseover:function(){$("body").css("background-color","red");},  
        mouseout:function(){$("body").css("background-color","#FFFFFF");}  
      });
    });
    </script>
    </head>
    <body>
    <p>This is a paragraph.</p>
    <button>请点击这里</button>
    </body>
    </html>
    
    

    .unbind( ) 取消事件事件

    $(selector).unbind(event,function);
    
    参数 描述
    event 可选。规定删除元素的一个或多个事件

    由空格分隔多个事件值。

    如果只规定了该参数,则会删除绑定到指定事件的所有函数。
    function 可选。规定从元素的指定事件取消绑定的函数名。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").click(function(){
        $(this).slideToggle();
      });
      $("button").click(function(){
        $("p").unbind();
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <p>点击任何段落可以令其消失。包括本段落。</p>
    <button>删除 p 元素的事件处理器</button>
    </body>
    </html>
    
    $(selector).unbind(eventObj)
    
    参数 描述
    eventObj 可选。规定要使用的事件对象。这个 eventObj 参数来自事件绑定函数。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      var x=0;
      $("p").click(function(e){
        $("p").animate({fontSize:"+=5px"});
        x++;
        if (x>=2)
          {
          $(this).unbind(e);
          }
      });
    });
    </script>
    </head>
    <body>
    <p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:事件的取消与添加

          本文链接:https://www.haomeiwen.com/subject/cgapyctx.html