基于JavaWeb的Jquery事件绑定

最新推荐文章于 2023-07-26 19:46:09 发布

913y

最新推荐文章于 2023-07-26 19:46:09 发布

阅读量191

点赞数

分类专栏： JavaWeb程序设计 Jquery 文章标签： javaweb jquery

本文链接：https://blog.csdn.net/Rlynn/article/details/115854607

版权

JavaWeb程序设计同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

Jquery

1 篇文章 0 订阅

订阅专栏

bind绑定事件

即为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

语法：

$(selector).bind(evenType [, evenData] , handler(eventObject));

evenType：是一个字符串类型的事件类型，就是所需要绑定的事件。
[, evenData] ：传递的参数（较少使用）
格式：{名：值，名：值…}
handler(eventObject)：该事件触发执行的函数。

一、绑定单个事件

bing绑定：

$(“元素”).bind(“事件类型”,function(){
});

直接绑定：

$(“元素”).事件名(function(){
});

二、绑定多个事件

1、 bind绑定：

同时为多个事件绑定同一函数

$(“元素”).bind(“事件类型1 事件类型2 …”,function(){
})；

为元素绑定多个事件，并设置对应函数。

$(“元素”).bind(“事件类型1”,function(){
}).bind(“事件类型2”,function(){
});

$(“元素”).bind(
{ “事件类型1”:function(){
}，
“事件类型2”:function(){
},
…
});

2、直接绑定:

$(“元素”).事件名(function(){
}).事件名(function(){
});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test" style="cursor:pointer">点击查看</div>
		<input id="btn" type="button" value="点击就不可再用了"/>
		<hr />
		<button id="btn1" type="button">按钮1</button>
		<button id="btn2" type="button">按钮2</button>
		<button id="btn3" type="button">按钮3</button>
		<button id="btn4" type="button">按钮4</button>
	</body>
	<script src="img/js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		/*绑定单个事件*/
		$("#test").bind("click",function(){
			console.log("欢迎来到Jquery！");
		});
		//原生JS绑定事件
		document.getElementById("test").onclick=function(){
			console.log("正在学习原生JS绑定事件...");
		}
		//直接绑定
		$("#btn").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被移开了")
		});
		//方法二
		$("#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>