jQuery移除事件

在jQuery中，可以通过unbind()方法移除绑定的事件或指定某一个事件。

unbind()的功能是移除元素绑定的事件，其调用的语法格式如下：

unbind([type],[fn])

其中，参数type为移除的事件类型，fn为需要移除的事件处理函数。如果该方法没有参数，则移除所有绑定的事件；如果带有参数type，则移除该参数所指定的事件类型；如果带有参数fn，则只移除绑定时指定的函数fn。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5 <title>unbind方法移除事件</title>
 6 <style>
 7     body{font-size: 13px;}
 8     .btn{border:solid 1px #666;padding: 2px;width: 80px;}
 9     div{line-height: 1.8em;}
10 </style>
11 <script src="jquery.js"></script>
12 <script>
13     $(function(){
14         function oClick(){        //自定义事件
15             $("#divTip").append("<div>按钮二的单机事件</div>");
16         }
17         $("input:eq(0)").bind("click",function(){    //绑定单机事件
18             $("#divTip").append("<div>按钮一的单机事件</div>");
19         })
20         $("input:eq(1)").bind("click",oClick);    //绑定自定义事件
21         $("input:eq(2)").bind("click",function(){    //移除全部单机事件
22             $("input").unbind();
23         })
24     })
25 </script>
26 </head>
27 <body>
28     <h3>功能描述：</h3>
29     <p>在页面中，设置三个按钮，前两个按钮分别执行各自的事件，</p><p>第三个按钮通过unbind方法移除所绑定的全部事件。</p><p>即点击第三个按钮后，前两个按钮的事件将不会执行。</p>
30     <input type="button" value="按钮1" class="btn" id="Button1" />
31     <input type="button" value="按钮2" class="btn" id="Button2" />
32     <input type="button" value="删除事件" class="btn" id="Button3" />
33     <div id="divTip" style="padding-top:10px;"></div>
34 </body>
35 </html>

结果如下图所示：

posted @ 2013-10-27 14:52  白小虫  阅读(588)  评论(0)  编辑  收藏  举报