JQuery入门——移除绑定事件unbind方法概述及应用


Posted in Javascript onFebruary 05, 2013

1、在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件。

2、示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>unbind方法移除绑定事件</title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
function oClick(){ //自定义事件 
$("#divTip").append("<div>这是按钮二绑定的事件</div>"); 
}; 
$("input:eq(0)").bind("click",function(){ 
$("#divTip").append("<div>这是按钮一绑定事件</div>"); 
}); 
$("input:eq(1)").bind("click",oClick); 
$("input:eq(2)").bind("click",function(){ 
$("input").unbind("click",oClick); 
$("#divTip").append("<div>删除按钮二事件</div>"); 
}); 
$("input:eq(3)").bind("click",function(){ 
$("input").unbind(); 
$("#divTip").append("<div>移出所有按钮绑定的事件</div>"); 
}); 
}) 
</script> 
</head> <body> 
<div> 
<input id="button1" class="btn" value="按钮一" type="button"/> 
<input id="button2" type="button" value="按钮二" class="btn"/> 
<input id="button3" type="button" value="删除按钮二事件" class="btn"/> 
<input id="button4" type="button" value="删除所有事件" class="btn"/> 
</div> 
<div id="divTip"></div> 
</body> 
</html>

3、效果图预览
点击按钮一和按钮二:

JQuery入门——移除绑定事件unbind方法概述及应用
点击删除按钮二事件在点击按钮二无反应点击按钮一有反应:

JQuery入门——移除绑定事件unbind方法概述及应用
点击删除所有事件后点击所有按钮无反应:

JQuery入门——移除绑定事件unbind方法概述及应用

Javascript 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 #Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 #Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 #Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 #Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 #Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 #Javascript
jquery zTree异步加载简单实例分享
Feb 05 #Javascript
You might like
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
用javascript实现画板的代码
2007/09/05 Javascript
javascript 写类方式之七
2009/07/05 Javascript
js 对象是否存在判断
2009/07/15 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
利用python求相邻数的方法示例
2017/08/18 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python进程池Pool应用实例分析
2019/11/27 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
中职生自荐信
2013/10/13 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
英镑符号 £
2022/02/17 杂记
Win11更新失败并提示0xc1900101
2022/04/19 数码科技