事件及其案例_并事件例子-CSDN博客

本文链接：https://blog.csdn.net/qq_44791674/article/details/108629293

在事件处理函数中，event为其唯一的参数，包含了事件所有的信息和方法。这里我们挑几个常见的说一下：

type：事件类型，和IE类似，但是没有“on”前缀，例如单击事件只是“click”。
target：发生事件的节点。
currentTarget：发生当前正在处理的事件的节点，可能是Target属性所指向的节点，也可能由于捕捉或者起泡，指向Target所指节点的父节点。
eventPhase：指定了事件传播的阶段。是一个数字。
timeStamp：事件发生的时间。
bubbles：指明该事件是否冒泡。
cancelable：指明该事件是否可以用preventDefault()方法来取消默认的动作。
preventDefault()方法：取消事件的默认动作；
stopPropagation()方法：停止事件传播。
altKey，ctrlKey，shiftKey，meta：顾名思义，这些属性是指键盘、鼠标事件发生的时候，是否同时按住了Alt、Ctrl或者Shift键，返回的是一个布尔值。
clientX、clientY：是指事件发生的时候，鼠标的横、纵坐标，返回的是整数，它们的值是相对于包容窗口的左上角生成的，在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是0，但是在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上
document.body.scrollLeft和document.body.scrollTop。
keyCode：返回keydown和keyup事件发生的时候，按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键
button：声明了被按下的鼠标键，是一个整数。0代表鼠标左键，1代表鼠标的中间键，2代表鼠标右键

imgmove

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#img1 {
				position: absolute;
				top: 0px;
				left: 0px;
			}
		</style>
	</head>
	<body onkeydown="move(event)">
		<img id="img1" src="./img/t.jpg" alt="">
	</body>
	<script type="text/javascript">
		var top1 = 0;
		var left = 0;

		function move(e) {
			switch (e.keyCode) {
				case 37:
					left -= 5;
					break;
				case 38:
					top1 -= 5;
					break;
				case 39:
					left += 5;
					break;
				case 40:
					top1 += 5;
					break;
			}
			var img1 = document.getElementById("img1");
			img1.style.top = top1 + "px";
			img1.style.left = left + "px";
		}
	</script>
</html>

ketpress

<!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 == 13){
				var what = document.getElementById("what");
				alert("开始搜索："+what.value);
			}
		}
	</script>
</html>

事件的注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 第一种注册方式 -->
		<input type="text" id="text1" onfocus="focus1()" />
	</body>
	<script type="text/javascript">
		var text1=document.getElementById("text1");
		//
		text1.onblur=blur2;
		//
		text1.addEventListener("change",function(){
			alert("值改变了")
		});
		function focus1(){
			text1.style.backgroundColor="blue";
		}
		function blur2(){
			var text1=document.getElementById("text1");
			text1.style.backgroundColor="gray";
		}
	</script>
</html>

onmousemove

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