JS学习-8.事件对象及取消默认事情

立花泷的学习日记

于 2021-11-15 11:10:57 发布

阅读量365

点赞数

分类专栏： js 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_37974765/article/details/121330217

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

事件对象:是和当前事件有关系 event：可以找到和这个事件有关系的内容
事件坐标：clientX/clientY
取消默认事件：return false
onmousemove：鼠标在内容上滑动时进行触发
onmouseup：鼠标抬起
onmousedown：鼠标按下
oncontextmenu:鼠标右键
onkeydown：键盘按下
onkeyup：键盘抬起

事件对象和取消默认事件的实例：
获取鼠标滑动位置的坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin: 0;padding: 0;};
		</style>
	</head>
	<body>
		<span id="mySpan"></span>
		<script>
		var mySpan=document.getElementById('mySpan');
		var timer=null;
		setInterval(function(){
			clearInterval(timer);
			window.onmousemove=function(event){
				console.log(event);//打印出事件的属性值，获取到事件的属性值
				mySpan.innerHTML=event.clientX+','+event.clientY;
				//document.write(event.clientX);
			}
		})		
		</script>
	</body>
</html>

键盘事件的实例：

<!DOCTYPE html>
<html>
	<!--获取键盘的属性，通过WASD控制方块移动-->
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin: 0;padding: 0;}
		#myDiv{
			width: 50px;height: 50px;position: absolute;top: 50px;left: 50px;background-color: #000000;
		}
		</style>
	</head>
	<body>
		<div id="myDiv"></div>
		<script>
		var myDiv=document.getElementById('myDiv');
		var l=50,h=50;
			onkeydown=function(event){//键盘按下的时候触发
				if(event.keyCode==65){//通过keyCode拿到按下的是否为所匹配的键
					l=l-10;
				};
				if(event.keyCode==68){
					l=l+10;
				};
				if(event.keyCode==83){
					h=h+10;
				};
				if(event.keyCode==87){
					h=h-10;
				};
				myDiv.style.top=h+'px';
				myDiv.style.left=l+'px';
			}
		</script>
	</body>
</html>

立花泷的学习日记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS学习-8.事件对象及取消默认事情

事件对象:是和当前事件有关系 event：可以找到和这个事件有关系的内容事件坐标：clientX/clientY取消默认事件：return falseonmousemove：鼠标在内容上滑动时进行触发onmouseup：鼠标抬起onmousedown：鼠标按下oncontextmenu:鼠标右键onkeydown：键盘按下onkeyup：键盘抬起事件对象和取消默认事件的实例：获取鼠标滑动位置的坐标<!DOCTYPE html><html> <head&
复制链接

扫一扫