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 相关文章推荐
JavaScript中的this实例分析
Apr 28 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
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
php数组总结篇(一)
2008/09/30 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python实现处理管道的方法
2015/06/04 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
python生成excel的实例代码
2017/11/08 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
应届大学生的推荐信
2013/11/20 职场文书
洗发露广告词
2014/03/14 职场文书
经典毕业生求职信
2014/07/12 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书