在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>
结果如下图所示: