浅谈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下的keyCode键码值表
Apr 10 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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
PHP脚本的10个技巧(1)
2006/10/09 PHP
一个用php实现的获取URL信息的类
2007/01/02 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php实现天干地支计算器示例
2014/03/14 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
市场营销专业毕业生自荐信
2013/11/02 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
超市采购员岗位职责
2015/04/07 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
小学四年级作文之写景
2019/08/23 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技