12-JQuery学习之bind绑定事件

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>13-bind绑定事件</title>
	</head>
	<body>
		<h3>bind()方法简单的绑定事件</h3>
		<div id="test" style="cursor: pointer;">点击查看内容</div>
		<input type="button" id="btntest" value="点击就不可用了">
		<hr>
		<button id="btn1">按钮1</button>
		<button id="btn2">按钮2</button>
		<button id="btn3">按钮3</button>
		<button id="btn4">按钮4</button>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/** 绑定单个事件
		 * 1、确定为哪些元素绑定事件
		 * 		获取元素
		 * 2、绑定什么时间
		 * 		第一个参数：事件的类型
		 * 3、相应事件触发的，执行的操作
		 * 		第二个参数：函数
		 * */
		 $('#test').bind('click',function(){
			 alert('时间在不停地筛选你身边的人和事，不会有人永远陪着你，但永远会有人陪你。')
		 })
		// 原生js绑定事件
		document.getElementById('test').onclick = function(){
			console.log('test.......');
		}
		/**直接绑定*/
		$('#btntest').click((function(){
			console.log(this);
			$(this).prop('disabled',true);
		}))
		
		//绑定多个事件
		// 1同时为多个事件绑定一个函数
		$('#btn1').bind('click mouseout',function(){
			console.log('按钮1。。。。')
		})
		
		// 为元素绑定多个事件并设置不同的函数
		$('#btn2').bind('click',function(){
			console.log('按钮2被点击了');
		}).bind('mouseout',function(){
			console.log('按钮2失去焦点');
		});
		
		// 
		$('#btn3').bind({
			'click':function(){
				console.log('按钮3被点击了');
			},
			'mouseout':function(){
				console.log('按钮3失去焦点');
			}
		})
		
		//直接绑定
		$('#btn4').click(function(){
			console.log('按钮4被点击了');
		}).mouseout(function(){
			console.log('按钮4失去焦点');
		});
	</script>
	<!-- 
		绑定事件
			blind绑定事件
				为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
				$(selector).bind(eventType[,eventData],handler(eventObject));
				eventType ：是一个字符串类型的事件类型值，就是你所需要绑定的时间。
				[,eventData] ：传递的参数，格式：{名:值,名2:值2}
				handler(eventObject) ： 该事件触发执行的函数
			绑定单个事件
				blind绑定
					$('指定元素').bind('事件类型',function(){});
			
				直接绑定
					$('元素').事件名(function{});
			绑定多个事件
				bind绑定
					1、同时为多个事件绑定同一个函数
					指定元素.bind('事件类型1 事件类型2 ...',function(){});
					2、为元素绑定多个事件，并设置对应的函数
					指定元素.bind('事件类型',function(){}).bind('事件类型',function(){});
					3、为元素绑定多个事件，并设置对应的函数
					指定元素.bind({
						'事件类型':function(){},
						'事件类型':function(){},
						'事件类型':function(){}
					})
				直接绑定
					指定元素.事件名(funciton(){}).事件名(function(){});
	 -->
</html>

posted @ 2021-03-29 22:41 雪漠阳光阅读(208) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称：雪漠阳光
园龄： 6年4个月
粉丝： 2
关注： 10

2025年3月

日

一

二

三

四

五

六

雪漠阳光

12-JQuery学习之bind绑定事件

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>13-bind绑定事件</title>
	</head>
	<body>
	<h3>bind()方法简单的绑定事件</h3>
	<div id="test" style="cursor: pointer;">点击查看内容</div>
	<input type="button" id="btntest" value="点击就不可用了">
	<hr>
	<button id="btn1">按钮1</button>
	<button id="btn2">按钮2</button>
	<button id="btn3">按钮3</button>
	<button id="btn4">按钮4</button>

	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	/** 绑定单个事件
	* 1、确定为哪些元素绑定事件
	* 获取元素
	* 2、绑定什么时间
	* 第一个参数：事件的类型
	* 3、相应事件触发的，执行的操作
	* 第二个参数：函数
	* */
	$('#test').bind('click',function(){
	alert('时间在不停地筛选你身边的人和事，不会有人永远陪着你，但永远会有人陪你。')
	})
	// 原生js绑定事件
	document.getElementById('test').onclick = function(){
	console.log('test.......');
	}
	/*直接绑定/
	$('#btntest').click((function(){
	console.log(this);
	$(this).prop('disabled',true);
	}))

	//绑定多个事件
	// 1同时为多个事件绑定一个函数
	$('#btn1').bind('click mouseout',function(){
	console.log('按钮1。。。。')
	})

	// 为元素绑定多个事件并设置不同的函数
	$('#btn2').bind('click',function(){
	console.log('按钮2被点击了');
	}).bind('mouseout',function(){
	console.log('按钮2失去焦点');
	});

	//
	$('#btn3').bind({
	'click':function(){
	console.log('按钮3被点击了');
	},
	'mouseout':function(){
	console.log('按钮3失去焦点');
	}
	})

	//直接绑定
	$('#btn4').click(function(){
	console.log('按钮4被点击了');
	}).mouseout(function(){
	console.log('按钮4失去焦点');
	});
	</script>
	<!--
	绑定事件
	blind绑定事件
	为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
	$(selector).bind(eventType[,eventData],handler(eventObject));
	eventType ：是一个字符串类型的事件类型值，就是你所需要绑定的时间。
	[,eventData] ：传递的参数，格式：{名:值,名2:值2}
	handler(eventObject) ：该事件触发执行的函数
	绑定单个事件
	blind绑定
	$('指定元素').bind('事件类型',function(){});

	直接绑定
	$('元素').事件名(function{});
	绑定多个事件
	bind绑定
	1、同时为多个事件绑定同一个函数
	指定元素.bind('事件类型1 事件类型2 ...',function(){});
	2、为元素绑定多个事件，并设置对应的函数
	指定元素.bind('事件类型',function(){}).bind('事件类型',function(){});
	3、为元素绑定多个事件，并设置对应的函数
	指定元素.bind({
	'事件类型':function(){},
	'事件类型':function(){},
	'事件类型':function(){}
	})
	直接绑定
	指定元素.事件名(funciton(){}).事件名(function(){});
	-->
	</html>