点击事件及按钮事件。

最新推荐文章于 2024-05-27 08:30:00 发布

匚淸

最新推荐文章于 2024-05-27 08:30:00 发布

阅读量3.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45617334/article/details/108587641

版权

事件源
事件名
事件注册
事件处理

点击事件

(1)单击事件
在这里插入图片描述
在这个案例中，事件源是id为“p1”的元素，事件名是单击事件注册οnclick=“fun()”,
也就是说，当单击id为“p1”的元素时，交给fun函数来处理。
(2)双击事件

(3)鼠标按下/抬起。(on mouse down / on mouse up)

(4)鼠标移入移出（on mouse enter / on mouse leave）
在这里插入图片描述
(5)事件综合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmouseenter="zoomout()" onmouseleave="zoomin()" onmousedown="zoomon()" onmouseup="zoomat()" onclick="zoomclick()" ondblclick="zoomdbl()"></div>
	</body>
	<script type="text/javascript">
		function zoomout() {
			var div1 = document.getElementById("div1");
			div1.style.width = "200px";
			div1.style.height = "200px";
			div1.style.backgroundColor  ="yellow";
		}
		
		function zoomin() {
			var div1 = document.getElementById("div1");
			div1.style.width = "100px";
			div1.style.height = "100px";
			div1.style.backgroundColor = "blue";
		}
		
		function zoomon() {
			var div1 = document.getElementById("div1");
			div1.style.width = "100px";
			div1.style.height = "100px";
			div1.style.backgroundColor = "red";
		}
		
		function zoomat() {
			var div1 = document.getElementById("div1");
			div1.style.width = "200px";
			div1.style.height = "200px";
			div1.style.backgroundColor  ="green";
		}
		
		function zoomclick() {
			var div1 = document.getElementById("div1");
			div1.style.width = "200px";
			div1.style.height = "200px";
			div1.style.backgroundColor  ="purple";
		}
		
		function zoodbl() {
			var div1 = document.getElementById("div1");
			div1.style.width = "200px";
			div1.style.height = "200px";
			div1.style.backgroundColor  ="pink";
		}
	</script>
</html>

以上便是关于点击事件的各种情况。

按钮事件

按钮事件需要定义一个按钮，点击按钮后会完成事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="zoomon()">点击</button>
		<p id="demo"></p>
	</body>
	<script type="text/javascript">
		function zoomon() {
			var p1 = document.getElementById("demo");
			p1.style.fontSize = "2em";
			p1.innerHTML= "666666";
		}
	</script>
</html>

点击后会显示给事件定义的显示666666的效果。
在这里插入图片描述

匚淸

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
点击事件及按钮事件。

事件源事件名事件注册事件处理点击事件(1)单击事件在这个案例中，事件源是id为“p1”的元素，事件名是单击事件注册οnclick=“fun()”,也就是说，当单击id为“p1”的元素时，交给fun函数来处理。(2)双击事件(3)鼠标按下/抬起。(on mouse down / on mouse up)(4)鼠标移入移出（on mouse enter / on mouse leave）(5)事件综合<!DOCTYPE html><html> <
复制链接

扫一扫