浅谈jQuery的bind和unbind事件(绑定和解绑事件)


Posted in Javascript onMarch 02, 2017

绑定其实就是把一些常规时间绑定到页面,然后进行各种常规操作

解绑就是接触绑定,绑定的事件失效

要注意,iQuery中的  .事件  如(.click())其实就是单个的绑定事件的简写(bind("click"))

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>02_事件绑定.html</title>
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" rel="external nofollow" />
 </head>
 <body>
 	 <div id="panel">
			<input type="button" id="start" value="绑定事件">
			<input type="button" id="stop" value="解绑事件">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
	jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
 </body>
 <script language="JavaScript">
 //当鼠标单次点击h5标题时,显示答案;当鼠标双次点击h5标题时,隐藏答案
//	$("h5").click(function(){
//		if($("div[class=content]").is(":hidden")){
//			$("div[class=content]").show();
//		}else{
//			$("div[class=content]").hide();
//		}
//	})
	
//	//动态效果
//	$("#start").click(function(){
//		/*
//		 * 动态绑定点击事件:绑定单个事件
//		 * 	bind(type,data,fn)
//		 * 		* type:指定要绑定的事件名称
//		 * 		* data:(可选)作为event.data属性值传递给事件对象的额外数据对象
//		 * 		* fn:回调函数,function(){}
//		 */
//		$("h5").bind("click",function(){
//			if($("div[class=content]").is(":hidden")){
//				$("div[class=content]").show();
//			}else{
//				$("div[class=content]").hide();
//			}
//		});
//		
//	});
//	$("#stop").click(function(){
//		/*
//		 * 动态解绑定点击事件
//		 * 	unbind(type,fn)
//		 * 		* type:(可选)指定要解绑的事件名称
//		 * 		* fn:(可选)回调函数
//		 */
//		$("h5").unbind();
//	});
	
//	$("h5").mouseover(function(){
//		$("div[class=content]").show();
//	}).mouseout(function(){
//		$("div[class=content]").hide();
//	});
	
	//动态效果
	$("#start").click(function(){
		/*
		 * 绑定事件:绑定多个事件
		 * 	* 事件名称之间,用空格隔开
		 */
		$("h5").bind("mouseover mouseout",function(){
			if($("div[class=content]").is(":hidden")){
				$("div[class=content]").show();
			}else{
				$("div[class=content]").hide();
			}
		});
	});
	$("#stop").click(function(){
		/*
		 * unbind(type)
		 * 	* 默认为空时:解绑定所有事件
		 * 	* 指定单个事件:解绑指定的单个事件
		 * 	* 指定多个事件:解绑指定的多个事件
		 */
		$("h5").unbind("mouseover mouseout");
		
	});
	
 </script>
</html>

以上这篇浅谈jQuery的bind和unbind事件(绑定和解绑事件)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 Javascript
Bootstrap Scrollspy源码学习
Mar 02 #Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 #Javascript
jQuery实用密码强度检测
Mar 02 #Javascript
通过npm引用的vue组件使用详解
Mar 02 #Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 #Javascript
vue-dialog的弹出层组件
May 25 #Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 #Javascript
You might like
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
JS验证不重复验证码
2017/02/10 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
详解VueJs中的V-bind指令
2018/05/03 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
python 从远程服务器下载东西的代码
2013/02/10 Python
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python中@property的理解和使用示例
2019/06/11 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
如何使用repr调试python程序
2020/02/28 Python
Python如何定义接口和抽象类
2020/07/28 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
幼儿园保育员辞职信
2014/01/12 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
2015年女工委工作总结
2015/07/27 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
PHP实现考试倒计时功能代码
2021/04/16 PHP
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
css样式important规则的正确使用方式
2022/06/10 HTML / CSS