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 SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
three.js如何实现3D动态文字效果
Mar 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
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
js一组验证函数
2008/12/20 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python re模块介绍
2014/11/30 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python中有几个关键字
2020/06/04 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
聚美优品广告词改编
2014/03/14 职场文书
品酒会策划方案
2014/05/26 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
安全先进班组材料
2014/12/26 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
粗暴解决CUDA out of memory的问题
2021/05/22 Python
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
python实现会员信息管理系统(List)
2022/03/18 Python
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL