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 相关文章推荐
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
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 intval的测试代码发现问题
2008/07/27 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php实现微信模板消息推送
2018/03/30 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
js模拟微博发布消息
2017/02/23 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
微信小程序联网请求的轮播图
2017/07/07 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python中hashlib模块用法示例
2017/10/30 Python
Python中super函数的用法
2017/11/17 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
数学系个人求职信范文
2014/01/30 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
经理助理岗位职责
2015/02/02 职场文书
质检员岗位职责
2015/02/03 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
文案策划岗位职责
2015/02/11 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL