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实现Windows任务管理器的代码
Mar 27 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
vue使用codemirror的两种用法
Aug 27 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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
php跨站攻击实例分析
2014/10/28 PHP
PHP生成条形图的方法
2014/12/10 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
c语言常见笔试题总结
2016/09/05 面试题
2014年团员学习十八大思想汇报
2014/09/13 职场文书
入股协议书范本
2014/11/01 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python