jQuery的bind和unbind事件（绑定和解绑事件）

最新推荐文章于 2024-05-18 18:58:15 发布
最新推荐文章于 2024-05-18 18:58:15 发布
阅读量4.5k 收藏
点赞数
分类专栏： java前端 java javaEE 学习领悟 文章标签： jQuery bind unbind
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zd305826520/article/details/51527384
版权
java 同时被 3 个专栏收录
33 篇文章 0 订阅
订阅专栏
javaEE
32 篇文章 0 订阅
订阅专栏
学习领悟
22 篇文章 0 订阅
订阅专栏

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

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

要注意，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" />
  </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>


幸福是什么感觉呢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery中绑定事件（bind()）和移除事件（unbind()）
10-24
本文主要向大家详细介绍了jQuery的绑定事件和移除事件的使用方法和示例分享，这里推荐给有需要的小伙伴们参考下。
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
01-19
解绑就是接触绑定，绑定的事件失效 要注意，iQuery中的 .事件 如(.click())其实就是单个的绑定事件的简写(bind(“click”)) html： <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN> <...
jquery中unbind和bind的用法
史大姐的博客
09-13 2312
JQuery中bind和unbind函数 2017-09-13  Hierj937v...  转自 闫志飞166 修改 微信分享： 测试： 页面代码：           JQuery代码： $().ready(function(){       for (var i = 0; i     
JQuery中绑定和解绑事件
最新发布
sunset_bo的博客
05-18 287
绑定事件 语法：bind(type,[date],fn); type:事件类型，主要包括click，mouseover，mouseout等基础事件， 此外还可以是自定义事件 date:可选函数 fn:处理函数 移除事件使用unbind()方法 语法：unbind([type],[fn]) type:事件类型，主要包括：布鲁日，focus，click，mouseout等基础事件 fn:处理函数 注意：当unbind()不带参数时，表示移除所绑定的全部事件 <!DOCTYPE ht
JQuery中bind和unbind函数
禅与计算机程序设计艺术
08-22 8496
JQuery中bind和unbind函数 测试： 页面代码： &lt;body&gt; &lt;input type="button" name="aaa" value="点击我"&gt; &lt;input type="checkbox" name="checkbox1"&gt; &lt;/body&g
Windows网络编程经验小结
02-21 1868
1. 如果在已经处于 ESTABLISHED状态下的socket(一般由端口号和标志符区分）调用closesocket（一般不会立即关闭而经历TIME_WAIT的过程）后想继续重用该socket：BOOL bReuseaddr=TRUE;setsockopt(s,SOL_SOCKET ,SO_REUSEADDR,(const char*)&bReuseaddr,sizeof(BOOL));2. 如
Service 启动 Bind与unBind
梦想有道，一个从梦中醒来的人。
06-17 2630
在Service中，如果使用Bind方法启动Service，则unBind时Service会退出，若使用startService启动，之后再bindService,则unBind时Service不会退出。
jQuery事件多次绑定与解绑问题实例分析
10-17
- 使用`.off()`或`.unbind()`可以解绑事件，可以指定特定的事件处理函数，也可以解绑所有事件处理函数。 - 注意，`.off()`和`.unbind()`不会影响通过HTML属性直接绑定的事件处理函数，如果需要解除这些函数，需要...
jQuery bind事件使用详解
10-28
本文将深入探讨`bind`方法的使用，包括它的基本用法、多事件绑定、自定义事件和命名空间等特性。 首先，`bind`方法的基本用法是将一个或多个事件处理器（函数）附加到指定的元素。例如，以下代码会在用户点击ID为`...
jQuery绑定和解绑点击事件及重复绑定解决办法
说：/~不了的专栏
10-14 9955
绑点击事件这个是jquery一个常用的功能，如click,unbind等等这些事件绑定事情，但还有很多朋友不知道，下面我来给大家介绍jQuery绑定和解绑点击事件及重复绑定解决办法,有需要了解的同学可参考。
bind和unbind
liguang159的博客
09-23 658
测试：页面代码：&lt;body&gt;     &lt;input type="button" name="aaa" value="点击我"&gt;     &lt;input type="checkbox" name="checkbox1"&gt; &lt;/body&gt;JQuery代码：$().ready(function(){
jquery中有两种绑定事件及移除事件
热门推荐
luckydog
06-12 1万+
//jquery中有两种绑定事件及移除事件 /* 1、eventName $(&quot;button&quot;).click(function(){}) 部分事件不支持 2、on(ecentName,fn) $(&quot;button&quot;).on('click',function(){}) 所有事件都支持 都可以绑定多个事件，不会覆盖 */ ...
jq函数绑定与解绑
weixin_30493401的博客
08-31 245
最近学到几个新的jq函数 1、bind（）绑定函数 2、unbind（）解绑函数 3、add() .给元素追加字符串 4、addClass() 给某元素增加class属性值 转载于:https://www.cnblogs.com/bigwang1126/p/9566556.html...
jQuery事件绑定，解绑方式
董无敌啊
03-17 1936
绑定事件 普通方法：$(selector).click(fn) 绑定多个事件：$(selector).bind(“event1 event2”,fn) 动态创建元素绑定事件：$(parentEle).delegate(childEle,”event1 event2”,fn) 终极版本：$(parentEle).on(“event1 event2”,childEle,fn) 触发事件 简单触发事件
jQuery解除超链接的click事件
wodeai1023的专栏
05-04 474
jQuery的 unbind 方法并不能解除超链接（即a标签）的click事件，如果想让超链接的默认click事件不发生需要如下处理： $('#some-link-id').click(function (event) { event.preventDefault(); }); // or $('#some-link-id').click(function () { ...
jQuery中live绑定的事件与解除绑定
PR
03-10 2744
本文章来给大家介绍一下关于jQuery中live绑定的事件与解除绑定两个方法，希望此文章对各位同学会有所帮助。 一$.fn.live 重复绑定 解决： 使用die()方法，在live()方法绑定前，将此元素上的前面被绑定的事件统统解除，然后再通过live()方法绑定新的事件。    代码如下 复制代码 //先通过die()方法解除，
jQuery事件绑定与DOM加载详解
通过`$(document).ready()`确保代码在DOM准备就绪时执行，使用`bind()`或`on()`绑定事件，`unbind()`移除事件，以及访问和利用事件对象来控制事件的行为。这些工具使开发者能够更高效、更优雅地处理用户交互和页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值