website
/
khd6.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			input {
				font-size: 26px;
				margin-top: 20px;
			}

			body {
				background-image: url(img/lx6/grassland.png);
			}

			#mytank {
				position: absolute;
				left: 10px;
				top: 100px
			}
		</style>
	</head>
	<body>
		<input type="button" value="按钮一" />
		<input type="button" value="按钮二" />
		<input type="button" value="按钮三" />
		<hr />
		<img id="mytank" src="img/lx6/right.png" />
		<script type="text/javascript">
			//179000522 廖孟豪
			var button1 = document.getElementsByTagName("input")[0];
			//console.log(button1);

			var button2 = document.getElementsByTagName("input")[1];
			//console.log(button2);

			var button3 = document.getElementsByTagName("input")[2];
			//console.log(button3);

			button1.addEventListener('click', () => alert("javascript事件测试一"));

			button2.addEventListener('dblclick', () => button2.value = "按钮二测试");

			button3.addEventListener('mouseover', () => {
				button3.style.color = "red";
				button3.style.backgroundColor = "blue"
			});
			button3.addEventListener('click', () => alert("javascript事件测试三"));
			var mytank = document.getElementById('mytank');
			window.addEventListener(
				'keydown',
				function(e) {
					//console.log(e.keyCode);
					if (e.keyCode == 39) { //right
						mytank.setAttribute("src", "img/lx6/right.png");
						mytank.style.left = (mytank.offsetLeft + 10) + 'px';
					} else if (e.keyCode == 37) { //left
						mytank.setAttribute("src", "img/lx6/left.png");
						mytank.style.left = (mytank.offsetLeft - 10) + 'px';
					} else if (e.keyCode == 38) { //up
						mytank.setAttribute("src", "img/lx6/up.png");
						mytank.style.top = (mytank.offsetTop - 10) + 'px';
					} else if (e.keyCode == 40) { //down
						mytank.setAttribute("src", "img/lx6/down.png");
						mytank.style.top = (mytank.offsetTop + 10) + 'px';
					}
				});
			document.oncontextmenu = () => event.preventDefault();//禁用右键，preventDefault阻止默认行为
		</script>
	</body>
</html>