javascript以及jQuery绑定事件方式_jquewry绑定事件-CSDN博客

本文链接：https://blog.csdn.net/zzze0101/article/details/90759704

1、javascript绑定事件方式

在标签中绑定点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function test(){
				console.log("点击成功！");
			}
		</script>
	</head>
	<body>
		<div style="border: 1px solid red;width: 200px;height: 200px;" onclick="test()">这是一个可以点击的div块</div>
	</body>
</html>

在浏览器运行点击后，查看浏览器控制台：
在这里插入图片描述
使用javascript对象绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div-click" style="border: 1px solid red;width: 200px;height: 200px;">这是一个可以点击的div块</div>
		<script>
			document.getElementById("div-click").onclick=function(){
				console.log("点击成功！");
			}
		</script>
	</body>
</html>

在浏览器运行点击后，查看浏览器控制台：
在这里插入图片描述

2、jQuery绑定事件方式

将jQuery对象转化为javascript对象来绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>	
	</head>
	<body>
		<div id="div-click" style="border: 1px solid red;width: 200px;height: 200px;">这是一个可以点击的div块</div>
		<script>
			$("#div-click")[0].onclick=function(){
				console.log("点击成功！");
			}
		</script>
	</body>
</html>

在浏览器运行点击后，查看浏览器控制台：
在这里插入图片描述

使用bind方法绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>	
	</head>
	<body>
		<div id="div-click" style="border: 1px solid red;width: 200px;height: 200px;">这是一个可以点击的div块</div>
		<script>
			$("#div-click").bind("click",function(){
				console.log("点击成功！");
			})
		</script>
	</body>
</html>

在浏览器运行点击后，查看浏览器控制台：
在这里插入图片描述
bind()方法括号内传入一个对象可以实现绑定多个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>	
	</head>
	<body>
		<div id="div-click" style="border: 1px solid red;width: 200px;height: 200px;">这是一个可以点击的div块</div>
		<script>
			$("#div-click").bind({
				click:function(){
					console.log("点击成功！");
				},
				mouseover:function(){
					console.log("鼠标滑到此div之上了！");
				}
			})
		</script>
	</body>
</html>

在浏览器运行后，鼠标滑到到此块中并且点击，查看浏览器控制台：
在这里插入图片描述

直接调用所绑定的事件方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>	
	</head>
	<body>
		<div id="div-click" style="border: 1px solid red;width: 200px;height: 200px;">这是一个可以点击的div块</div>
		<script>
			$("#div-click").click(function(){
				console.log("点击成功！");
			})
		</script>
	</body>
</html>