Jquery给指定元素绑定事件

- 日理万妓 2022-12-14 03:52 141阅读 0赞

**bind（)**

*  注意：bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()
    
    ：bind()函数只针对已经存在的元素进行事件的设置
 *  介绍：bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
 *  使用：绑定单个事件 模板： $(selector).bind(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, ...\})

<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**()

*  介绍：unbind() 方法移除被选元素的事件处理程序。
    
    该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行
 *  使用：去除p标签上所有事件 模板：$(selector).unbind(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>
    
     
    
    去除绑定的某一特定事件方式
    
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    function alertMe()
    {
    alert("Hello World!");
    }
    
    $(document).ready(function(){
      $("p").click(alertMe);
      $("button").click(function(){
        $("p").unbind("click",alertMe);
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <p>点击任何段落可以触发一个提示框。包括本段落。</p>
    <button>从 p 元素的 click 事件删除提示框函数</button>
    </body>
    </html>

**live（） on（） delegate()使用方式基本与bind（）并且都支持未来新添加元素的事件设置**

以live（）为例

<html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").live("click",function(){//此处的live（）改成bind（），新增的<p>标签就没有此事件，而live（）依然存在此事件
        $(this).slideToggle();
      });
      $("button").click(function(){
        $("<p>This is a new paragraph.</p>").insertAfter("button");
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>点击任意 p 元素会令其消失。包括本段落。</p>
    <button>在本按钮后面插入新的 p 元素</button>
    <p><b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。</p>
    </body>
    </html>

**现在更推荐使用on()，主讲on()**

**Reason**：

bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()， 替代函数为on(), 这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除； c、bind()、.live() 或.delegate()，查看源码就会发现，它们实际上调用的都是.on()方法

1.  使用on()对类选择器进行单事件绑定

<body>
     2 <button id="add" type="button">add DIV</button>
     3 <button id="del" type="button">del DIV</button>
     4 <button id="onBtn" type="button">绑定事件</button>
     5 <button id="offBtn" type="button">解绑事件</button>
     6 <div id="container">
     7     <div class='created'>我是原生div<div/>
     8 </div>
     9 </body>
    10 <script>
    11     $(function () {
    12         $("#add").click(function(){
    13             $("#container").prepend("<div class='created'>我是动态生成的div<div/>")
    14         });
    15         $("#del").click(function(){
    16             $("div").remove(".created:first")
    17         });
    18         $("#onBtn").click(function(){
    19             $("#container").on("click",".created",function(){
    20                 alert(1);
    21             });
    22         });
    23         $("#offBtn").click(function(){
    24             $("#container").off("click");
    25         })
    26     })
    27 </script>