zoukankan      html  css  js  c++  java
  • 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>
    这世上所有美好的东西,都需要踮起脚尖。
  • 相关阅读:
    hihoCoder #1176 : 欧拉路·一 (简单)
    228 Summary Ranges 汇总区间
    227 Basic Calculator II 基本计算器II
    226 Invert Binary Tree 翻转二叉树
    225 Implement Stack using Queues 队列实现栈
    224 Basic Calculator 基本计算器
    223 Rectangle Area 矩形面积
    222 Count Complete Tree Nodes 完全二叉树的节点个数
    221 Maximal Square 最大正方形
    220 Contains Duplicate III 存在重复 III
  • 原文地址:https://www.cnblogs.com/XMYG/p/14594780.html
Copyright © 2011-2022 走看看