浅谈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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
Js 中debug方式
Feb 07 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
Vue组件开发初探
Feb 14 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
JavaScript 反射学习技巧
Oct 16 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
深入array multisort排序原理的详解
2013/06/18 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
angularJS开发注意事项
2018/05/26 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
python列表的增删改查实例代码
2018/01/30 Python
python生成并处理uuid的实现方式
2020/03/03 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
python实现简单的学生管理系统
2021/02/22 Python
Java编程面试题
2016/04/04 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
奶茶店创业计划书
2014/08/14 职场文书
生活部的活动方案
2014/08/19 职场文书
搞笑婚前保证书
2015/02/28 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
工作会议简报
2015/07/20 职场文书
新教师教学工作总结
2015/08/12 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS