JavaScript事件总结

最新推荐文章于 2024-09-18 14:33:27 发布

ws_991119

最新推荐文章于 2024-09-18 14:33:27 发布

阅读量56

点赞数

本文链接：https://blog.csdn.net/weixin_45379031/article/details/108630205

版权

onmousemove 事件
在鼠标指针移到指定的元素后执行Javascript代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmousemove="fun(event)"></div>
		<img id="img1" src="">
		鼠标的坐标<p id="p1"></p>
		<script type="text/javascript">
			function fun(e){
				document.getElementById("p1").innerText=e.clientX+","+e.clientY;
				var img1=document.getElementById("img1");
				p1.innerText=e.clientX+","+e.clientY;
				img1.style.left=e.clientY+"px";
				img1.style.right=e.clientX+"px";
			}
		</script>
	</body>
</html>

onmousewheel事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmousewheel="fun(event)"></div>
		<script type="text/javascript">
			var width = 100;
			var height = 100;

			function fun(e) {
				if (e.wheelDelta > 0) {
					width += 5;
					height += 5;
				} else {
					width -= 5;
					height -= 5;
				}
				var div1 = document.getElementById("div1");
				div1.style.height = height + "px";
				div1.style.width = width + "px";
			}
		</script>
	</body>
</html>

onkeypress事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="what" onkeypress="search(event)" />
	</body>
	<script type="text/javascript">
		function search(e) {
			if (e.keyCode == 87) {
				var what = document.getElementById("what");
				alert("开始搜索" + what.value);
			}
		}
	</script>
</html>

onkeyup事件

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="what" onkeyup="keydown(event)" />
	</body>
	<script type="text/javascript">
		function keydown(e) {
			alert(e.keyCode);
		}
	</script>
</html>