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

更新时间：2017年03月02日 09:04:41 投稿：jingxian

下面小编就为大家带来一篇浅谈jQuery的bind和unbind事件(绑定和解绑事件)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

要注意，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事件(绑定和解绑事件)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery实现的手风琴侧边菜单效果
这篇文章主要介绍了jQuery实现的手风琴侧边菜单效果,涉及jQuery事件响应及元素属性动态操作相关实现技巧,需要的朋友可以参考下
2017-03-03
jQuery布局插件UI Layout简介及使用方法
UI Layout是一种基于jQuery的布局框架，其核心是一个大小自适应的中心面板，面板的上下左右四个方向可以放置可折叠、可缩放的面板，感兴趣的朋友可以参考下哈
2013-04-04
jQuery UI插件自定义confirm确认框的方法
这篇文章主要介绍了jQuery UI插件自定义confirm确认框的方法,实例分析了jQuery的UI插件使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
Jquery实现无刷新DropDownList联动实现代码
随着Jquery1.4的发布，Jquery运用越来越多了，让我们来实现以前经常用到的DropDownList无刷新联动。
2010-03-03
基于JQuery的类似新浪微博展示信息效果的代码
滑动向下时，把最后一个节点copy过去插入在第一节点中，并在显示时隐藏，再通过透明渐变显示出来。附上源码，需要的朋友可以copy
2012-07-07
利用jqgrid实现上移下移单元格功能
这篇文章主要给大家介绍了关于如何利用jqgrid实现上移下移单元格功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
jquery.uploadView 实现图片预览上传功能
图片上传，网上有好多版本，今天小编给大家分享jquery.uploadView 实现图片预览上传功能，感兴趣的的朋友一起看看吧
2017-08-08
使用jQuery实现Form表单提交操作
在Web开发中,表单提交是一个常见的操作,通过表单提交用户可以向服务器发送数据,jQuery是一个流行的JavaScript库,可以简化处理JavaScript的操作,包括表单提交,在本篇博客中,我们将介绍如何使用jQuery来实现表单提交操作,需要的朋友可以参考下
2024-09-09
Easyui使用Dialog行内按钮布局的实例
下面小编就为大家带来一篇Easyui使用Dialog行内按钮布局的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
jQuery实现自动切换播放的经典滑动门效果
这篇文章主要介绍了jQuery实现自动切换播放的经典滑动门效果,可实现tab自动定时切换的功能,涉及jQuery基于定时函数动态操作页面元素的相关技巧,需要的朋友可以参考下
2015-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具