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常见注意事项
Jan 01 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
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
一个颜色轮换的简单例子
2006/10/09 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Python抓取百度查询结果的方法
2015/07/08 Python
Python 3中的yield from语法详解
2017/01/18 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python3多线程操作简单示例
2018/05/22 Python
浅析Python __name__ 是什么
2020/07/07 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
学生会主席演讲稿
2014/04/25 职场文书
董事长助理岗位职责
2015/02/11 职场文书
财务工作个人总结
2015/02/27 职场文书
铁人观后感
2015/06/16 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL