浅谈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 相关文章推荐
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
微信小程序日历效果
Dec 29 Javascript
VUE中使用MUI方法
Feb 12 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
javascript的事件描述
2006/09/08 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python中使用HTMLParser解析html实例
2015/02/08 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
教师自我评价范文
2013/12/16 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang