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写法
Sep 15 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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
晶体管来复再生式二管收音机
2021/03/02 无线电
php 高效率写法 推荐
2010/02/21 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
在Python web中实现验证码图片代码分享
2017/11/09 Python
在python中bool函数的取值方法
2018/11/01 Python
Python 支付整合开发包的实现
2019/01/23 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
深入理解Python异常处理的哲学
2019/02/01 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
Python如何将模块打包并发布
2020/08/30 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
车间主任岗位职责
2014/03/16 职场文书
网络营销计划
2015/01/17 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年材料员工作总结
2015/04/30 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书