jQuery的事件绑定

最新推荐文章于 2023-07-07 16:55:54 发布

aqzengkuasheng

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量162

点赞数

分类专栏： js 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/123001710

版权

js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 		<script type="text/javascript">
			$(function(){
				//绑定事件（绑定单个事件）
				$("btntest").bind("click",function(){
					console.log("世上无难事，只怕有心人");
				})
				
			});
		</script> -->
	</head>
	<body>
		<h3>bind()方简单的绑定事件</h3>
		 <div id="test" style="cursor:pointer">点击查看名言</div>
		 <input id="btntest" type="button" value="点击就不可用了" />
		 <button type="button" id="1">按钮1</button>
		 <button type="button" id="2">按钮2</button>
		 <button type="button" id="3">按钮3</button>
		 <button type="button" id="4">按钮4</button>
	</body>
	<script type="text/javascript">
		//绑定事件（绑定单个事件）
		$("#test").bind("click",function(){
			console.log("世上无难事，只怕有心人");
		});
		//简单常用版本---平时用这个
		$("#btntest").click(function(){
			console.log("nihao");
		});
		//禁用按钮
		$("#btntest").click(function(){
			$(this).prop("disabled",true);
		});
		//为多个事件绑定同一个函数
		$("#1").bind("click mouseout",function(){
			console.log("按钮1。。。");
		});
		//为元素绑定多个事件，并设置对应的函数
		$("#2").bind("click",function(){
			console.log("第一个函数");
		}).bind("mouseout",function(){
			console.log("第二个函数");
		});
		//为元素绑定多个事件，并设置对应的函数   ----方法2
		$("#3").bind({
			"click":function(){
				console.log("第一个函数");
			},
			"mouseout":function(){
				console.log("第二个函数");
			}
			
		});
		//为元素绑定多个事件，并设置对应的函数  ----方法3 这个是最常用的方法
		$("#4").click(function(){
			console.log("第一个函数");
		}).mouseout(function(){
			console.log("第二个函数");
		});
	</script>
</html>

aqzengkuasheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的事件绑定

bind()绑定事件为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!
复制链接

扫一扫