HTML DOM Event 键盘事件

最新推荐文章于 2024-06-18 09:28:07 发布

云汐微生

最新推荐文章于 2024-06-18 09:28:07 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/esqlbejsqw/article/details/116992465

版权

HTML DOM Event 键盘事件

开发工具与关键技术： Dw、JS

作者：

撰写时间：2021/5/18

首先先了解一下JS JS的全称是 JavaScript

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为

想要用键盘事件就必须使用event事件

首先将布局完成好

可以直接做一个小方框，这里的方框只是为了方便调用

个人建议套用一个图片就好

将图片赋予ID

这里是因为要套用Name获取单位所以不用赋予ID

在script 标签下加入加载事件

window.οnlοad=function()

然后赋予值

var box=document.getElementsByTagName("div")[0];

这里是获取第一个div（因为这里只有一个div）

在数组中一般0才是第一个，包括日期单位。

document.οnkeydοwn=function(event)

获取之后再利用event单位嵌套出switch 再调用输入事件

switch(event.keyCode)

语句为

case 37:

这里的37指的是键盘码

这里的键盘码不全

box.style.left=box.offsetLeft-20+"px";

offsetLeft也是属于DOM 事件的一种

返回元素的水平偏移位置

配合键盘码就可以做得到位置偏移了

源代码分享

窗体顶端自动换行窗体底端
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>82JavaScript键盘事件_键盘移动div</title>
	<style>
	div{
	width: 100px;
	height: 100px;
	background: #DE9E9F;
	position: absolute;
	top: 100px;
	left:100px;
	}
	</style>
	</head>
	<body>

	<div></div>
	<script>
	window.οnlοad=function(){
	var box=document.getElementsByTagName("div")[0];
	console.log(box);
	document.οnkeydοwn=function(event){
	var speed=20;
	switch(event.keyCode){
	case 37:
	box.style.left=box.offsetLeft-20+"px";
	break;
	case 38:
	box.style.top=box.offsetTop-20+"px";
	break;
	case 39:
	box.style.left=box.offsetLeft+20+"px";
	break;
	case 40:
	box.style.top=box.offsetTop+20+"px";
	break;
	default:
	break;
	}
	}
	}
	</script>
	</body>
	</html>

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

云汐微生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML DOM Event 键盘事件

HTML DOM Event 键盘事件开发工具与关键技术： Dw、JS作者：撰写时间：2021/5/18首先先了解一下JS JS的全称是 JavaScript JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScr...
复制链接

扫一扫