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>
这世上所有美好的东西，都需要踮起脚尖。