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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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 XML操作类DOMDocument
2009/12/16 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[02:27]刀塔重生降临
2015/10/14 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
python中pass语句用法实例分析
2015/04/30 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
2014年生产部工作总结
2014/12/17 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
2015年保送生自荐信
2015/03/24 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang