JS中的绑定事件

最新推荐文章于 2024-04-01 10:29:28 发布

文哈哈wcx

最新推荐文章于 2024-04-01 10:29:28 发布

阅读量111

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_61977924/article/details/120335133

版权

原生JS绑定事件

document.getElementById("test").onclick = function(){
        console.log("test...");

jQuery的bind绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
	</head>
	<body>
		<h3>bind()方简单的绑定事件</h3>
		<!-- style="cursor:pointer" 设置鼠标图标 -->
		<div id="test" style="cursor:pointer">点击查看名言</div>
		<input id="btntest" type="button" value="点击就不可用了" />
		<hr >
		<button type="button" id="btn1">按钮1</button>
		<button type="button" id="btn2">按钮2</button>
		<button type="button" id="btn3">按钮3</button>
		<button type="button" id="btn4">按钮4</button>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/*
			 1.确定为哪些元素绑定事件
				获取元素
			 2.绑定什么事件（事件类型）
				第一个参数：事件的类型
			 3.相应事件触发的，执行的操作
				第二个参数：函数
		 * */
		/* 绑定单个事件 */	
		$("#test").bind("click",function(){
			console.log("世上无难事，只怕有心人");
		});
		// 直接绑定
		$("#btntest").click(function(){
			// 禁用按钮
			console.log(this);
			$(this).prop("disabled",true);
		});
		
		/* 绑定多个事件 */
		// 1. 同时为多个事件绑定同一个函数
		$("#btn1").bind("click mouseout",function(){
			console.log("按钮1...");
		});
		
		// 2. 为元素绑定多个事件，并设置对应的函数
		$("#btn2").bind("click",function(){
			console.log("按钮2被点击了...");
		}).bind("mouseout",function(){
			console.log("按钮2移开了...");
		});
		
		// 3. 为元素绑定多个事件，并设置对应的函数
		$("#btn3").bind({
			"click":function(){
				console.log("按钮3被点击了...");
			},
			"mouseout":function(){
				console.log("按钮3移开了...");
			}
		});
		
		// 直接绑定
		$("#btn4").click(function(){
			console.log("按钮4被点击了...");
		}).mouseout(function(){
			console.log("按钮4移开了...");
		});
		
		
	</script>
</html>

语法：
                   $(selector).bind( eventType [, eventData], handler(eventObject));
                      eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
                       [, eventData]：传递的参数，格式：{名:值,名2:值2}
                      handler(eventObject)：该事件触发执行的函数
               绑定单个事件
                   bind绑定
                       $("元素").bind("事件类型",fucntion(){

                       });

$("#test").bind("click",function(){
			console.log("世上无难事，只怕有心人");
		});

                   直接绑定
                       $("元素").事件名(function(){

                       });

$("#btntest").click(function(){
			// 禁用按钮
			console.log(this);
			$(this).prop("disabled",true);
		});

               绑定多个事件
                   bind绑定
                       1. 同时为多个事件绑定同一个函数
                       指定元素.bind("事件类型1 事件类型1 ..",function(){

                       });

$("#btn1").bind("click mouseout",function(){
			console.log("按钮1...");
		});

                       2. 为元素绑定多个事件，并设置对应的函数
                       指定元素.bind("事件类型",function(){

                       }).bind("事件类型",function(){

                       });

$("#btn2").bind("click",function(){
			console.log("按钮2被点击了...");
		}).bind("mouseout",function(){
			console.log("按钮2移开了...");
		});

                       3. 为元素绑定多个事件，并设置对应的函数
                       指定元素.bind({
                           "事件类型":function(){

                           },
                           "事件类型":function(){

                           }
                       });

$("#btn3").bind({
			"click":function(){
				console.log("按钮3被点击了...");
			},
			"mouseout":function(){
				console.log("按钮3移开了...");
			}
		});

                   直接绑定
                       指定元素.事件名(function(){

                       }).事件名(function(){

                       });

$("#btn4").click(function(){
			console.log("按钮4被点击了...");
		}).mouseout(function(){
			console.log("按钮4移开了...");
		});

文哈哈wcx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS中的绑定事件

原生JS绑定事件document.getElementById("test").onclick = function(){ console.log("test...");jQuery的bind绑定事件$("#test").bind("click",function(){ console.log("世上无难事，只怕有心人"); });语法： $(selector).bind( eventType [, eventData...
复制链接

扫一扫