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中的window.open返回object的错误的解决方法
Aug 15 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
js实现数组转换成json
Jun 26 Javascript
JS匿名函数实例分析
Nov 26 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php实现zip文件解压操作
2015/11/03 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
python绘制漏斗图步骤详解
2019/03/04 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
异常和异常类的概念
2014/09/12 面试题
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
大学奖学金获奖感言
2014/08/15 职场文书
煤矿安全协议书
2014/08/20 职场文书
干部考核工作总结2015
2015/07/24 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android