浅谈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和ActionScript的交互实现代码
Aug 01 Javascript
JS交换变量的方法
Jan 21 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
原生JS实现多条件筛选
Aug 19 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
html下载本地
2006/06/19 Javascript
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
Python 元组(Tuple)操作详解
2014/03/11 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
tensorflow如何批量读取图片
2019/08/29 Python
python图形用户接口实例详解
2019/12/16 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
windows支持哪个版本的python
2020/07/03 Python
python IP地址转整数
2020/11/20 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
存储过程和函数的区别
2013/05/28 面试题
高中物理教学反思
2014/02/08 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
党校个人总结
2015/03/04 职场文书