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(),on()绑定事件方式总结
奔跑的蜗牛
09-14 7871
一.bind() 使用方式：$(selector).bind(event,data,function) event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等； 　　　　　　　单事件处理：例如 $(selector).bind("click",data,function); 　　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(select
jQuery源码-解除绑定事件函数unbind
pythonluo的专栏
03-18 1535
jQuery提供的解除事件绑定的接口,其实jQuery任何解除事件绑定的接口都最终会走this.off函数 解除委托委托绑定也是如此 undelegate接口函数也是最终走off函数 unbind: function( types, fn ) { return this.off( types, null, fn ); } 下面就开始记录解除绑定的源码过程,HTML请自行补脑,这
JQuery中的bind()和unbind()的理解
极客神殿
08-01 2207
bind()和unbind()提供了事件的绑定和取消机制，既可以绑定html默认支持的事件，也能够绑定自定义的事件。 1、JQuery中事件可以重复绑定，不会覆盖。 $("#button1").bind("click",function(){ alert("func1"); }); $("#button1").bind("click",function(){ ale...
JQuery中绑定事件（bind()）和移除事件（unbind()）
10-24
本文主要向大家详细介绍了jQuery的绑定事件和移除事件的使用方法和示例分享，这里推荐给有需要的小伙伴们参考下。
JQuery中绑定和解绑事件
最新发布
sunset_bo的博客
05-18 297
绑定事件 语法：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函数
Liucheng417的博客
04-12 2890
测试： 页面代码： JQuery代码： $().ready(function(){ for (var i = 0; i < 3; i++) { $("input[type='button']").click(function(){ alert("aaaa");
jquery中unbind和bind的用法
史大姐的博客
09-13 2312
JQuery中bind和unbind函数 2017-09-13  Hierj937v...  转自 闫志飞166 修改 微信分享： 测试： 页面代码：           JQuery代码： $().ready(function(){       for (var i = 0; i     
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
01-19
解绑就是接触绑定，绑定的事件失效 要注意，iQuery中的 .事件 如(.click())其实就是单个的绑定事件的简写(bind(“click”)) html： <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN> <...
jQuery事件多次绑定与解绑问题实例分析
10-17
- 使用`.off()`或`.unbind()`可以解绑事件，可以指定特定的事件处理函数，也可以解绑所有事件处理函数。 - 注意，`.off()`和`.unbind()`不会影响通过HTML属性直接绑定的事件处理函数，如果需要解除这些函数，需要...
jQuery bind事件使用详解
10-28
本文将深入探讨`bind`方法的使用，包括它的基本用法、多事件绑定、自定义事件和命名空间等特性。 首先，`bind`方法的基本用法是将一个或多个事件处理器（函数）附加到指定的元素。例如，以下代码会在用户点击ID为`...
jQuery事件绑定与解绑
执笔丶画苍生的博客
08-13 2776
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
jQuery bind（）和unbind（）示例
一名可爱的技术搬运工
05-23 357
jQuery bind（）函数用于将事件处理程序附加到元素，而unbind（）用于将现有事件处理程序与元素分离。 例子 演示的简单html代码。 <div id="BoxId"> Mouseover Me, Click Me or Double Click Me </div> <span></span> 1. bind（） ...
jQuery---解除事件
Philo的博客
01-26 5221
jQuery—解除事件 常见的解除事件有三种，往往取决与你绑定事件所用的关键字： 举例1： //绑定事件，使用id选择器给btn1绑定点击事件 $("#btn1").on("click",function(){ console.log("点击事件") }).mouseenter(function(){ console.log("鼠标聚焦事件") }) //点击第二个按钮，解除第一个按钮事件 $("#btn2").on("click",function()
jquery bind()与unbind()用法
yangshijin1988的专栏
11-11 7473
jquery bind()事件用于绑定某个事件，例如click事件。 jquery unbind()事件必须先使用bind()事件后才会生效。 业务场景： 当需对某个按钮添加单击事件，为了控制重复点击，需点击完后立马去掉单击事件。        做法1：采用bind()和unbind()事件。 $(function(){ $('#btn').bind('click', aa); })
初次使用CKeditor replace使用方法
太快的幸福,措手不及
03-29 8642
1. 官网下载CKeditor ，解压后粘贴到项目中 2.查看ck自带的案例， 导入相应的js 和css   /ckeditor/ckeditor.js"> 3. 替换文本域即可 textarea class="ckeditor" cols="50" id="editor1" rows="100" name="goodsdesc">textarea> 4.显示的
jQuery事件绑定与DOM加载详解
通过`$(document).ready()`确保代码在DOM准备就绪时执行，使用`bind()`或`on()`绑定事件，`unbind()`移除事件，以及访问和利用事件对象来控制事件的行为。这些工具使开发者能够更高效、更优雅地处理用户交互和页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值