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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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中实现进程间通讯
2006/10/09 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP中list方法用法示例
2016/12/01 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
Vue watch响应数据实现方法解析
2020/07/10 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
保险公司年会主持词
2014/03/22 职场文书
总结会主持词
2015/07/02 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python