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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
jQuery使用手册之二 DOM操作
Mar 24 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
js有关元素内容操作小结
Dec 20 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
js获取和设置属性的方法
Feb 20 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
javascript中setInterval的用法
Jul 19 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
PHP5 安装方法
2006/10/09 PHP
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP正则验证Email的方法
2015/06/15 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python编程argparse入门浅析
2018/02/07 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
django 取消csrf限制的实例
2020/03/13 Python
Python 存取npy格式数据实例
2020/07/01 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
预备党员承诺书
2014/03/25 职场文书
环境科学专业求职信
2014/08/04 职场文书
最美家庭活动方案
2014/08/31 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
社保转移委托书范本
2014/10/08 职场文书
上班迟到检讨书
2015/05/06 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
致运动员的广播稿
2015/08/19 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS