javaScript——DOM续（六）

layman0528

于 2025-05-01 10:00:00 发布

阅读量1.1k

点赞数 30

分类专栏：前端学习 # ECMAScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_46282323/article/details/147625832

版权

前端学习同时被 2 个专栏收录

17 篇文章

订阅专栏

ECMAScript

12 篇文章

订阅专栏

滚轮事件

在 Web 开发中监听鼠标滚轮事件时，不同浏览器存在差异。下面是对 onmousewheel、DOMMouseScroll 和标准 wheel 事件的完整说明和兼容写法。

🌀 `onmousewheel` 事件概览

onmousewheel 是早期浏览器（如 IE 和 Chrome）支持的鼠标滚轮事件。
Firefox 不支持 onmousewheel，而是使用 DOMMouseScroll。

element.onmousewheel = function(e) {
  console.log('滚轮滚动：', e.wheelDelta);
};

🦊 Firefox 中使用 `DOMMouseScroll`

DOMMouseScroll 是 Firefox 早期版本支持的事件，只能使用 addEventListener 绑定：

element.addEventListener('DOMMouseScroll', function(e) {
  console.log('Firefox 滚轮滚动：', e.detail);
});

e.detail：
- 正数：向下滚
- 负数：向上滚

✅ 推荐使用现代标准事件 `wheel`

wheel 是现代浏览器支持的标准滚轮事件：

element.addEventListener('wheel', function(e) {
  console.log('标准滚动事件：', e.deltaY);
});

e.deltaY > 0 表示向下滚，< 0 表示向上滚

🧩 跨浏览器统一写法

function addMouseWheel(element, handler) {
  if ('onwheel' in document) {
    // 标准事件
    element.addEventListener('wheel', handler);
  } else if ('onmousewheel' in document) {
    // Chrome 和 IE
    element.addEventListener('mousewheel', handler);
  } else {
    // Firefox 老版本
    element.addEventListener('DOMMouseScroll', handler);
  }
}

addMouseWheel(document, function(e) {
  e = e || window.event;
  const delta = e.wheelDelta || -e.detail || -e.deltaY;

  if (delta > 0) {
    console.log('🟢 向上滚');
  } else {
    console.log('🔻 向下滚');
  }

  // 阻止默认滚动行为
  e.preventDefault ? e.preventDefault() : (e.returnValue = false);
});

✅ 注意点

wheelDelta 表现向上/下滚动的数值，但在火狐中需要使用detail
当滚轮滚动时，若浏览器有滚动条，滚动条会随之滚动，若不希望发生，则使用return false 取消
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，需要使用event.preventDefault()
IE8 中，event.preventDefault()不能使用

✅ 总结对比表格

事件名	支持浏览器	是否标准	如何绑定
`onmousewheel`	Chrome、IE	❌ 非标准	`onmousewheel` 或 `addEventListener`
`DOMMouseScroll`	Firefox	❌ 非标准	只能用 `addEventListener`
`wheel`	所有现代浏览器	✅ 推荐使用	推荐使用 `addEventListener`

键盘事件

在 Web 开发中，键盘事件是用户交互中非常常见的一类。主要有三个核心事件：

keydown：键盘按下时触发（持续触发）
keypress：按下字符键时触发（已废弃）
keyup：键盘释放时触发

1️⃣ keydown

事件在按键被按下时触发。
适用于所有键（包括功能键如 Ctrl、Shift、Arrow 等）。
可以持续触发（长按）。

document.addEventListener('keydown', function(e) {
  console.log('按下：', e.key, e.code);
});

2️⃣ keypress（⚠️ 已废弃）

只对字符键有效（如 a-z、0-9、空格等）。
功能键（如 Shift、Enter、Esc）不会触发该事件。
在现代浏览器中已经被弃用，不推荐使用。

document.addEventListener('keypress', function(e) {
  console.log('keypress：', e.key);
});

⚠️ 建议改用 keydown 代替。

3️⃣ keyup

在键盘释放时触发。
常用于输入完成后的处理，例如表单提交、命令执行等。

document.addEventListener('keyup', function(e) {
  console.log('松开：', e.key);
});

🔑 常用属性说明

属性	说明
`e.key`	按下的键的值（如 “a”, “Enter”）
`e.code`	实体键的编码（如 “KeyA”, “Enter”）
`e.keyCode`	旧标准中的键码（已废弃，仍可用）
`e.ctrlKey`	是否按住了 Ctrl 键
`e.shiftKey`	是否按住了 Shift 键
`e.altKey`	是否按住了 Alt 键

🔄 键值举例（e.key）

键	`e.key` 值	`e.code` 值
A	“a” / “A”	“KeyA”
Enter	“Enter”	“Enter”
空格	" "	“Space”
Shift	“Shift”	“ShiftLeft” / “ShiftRight”
↑（上箭头）	“ArrowUp”	“ArrowUp”

🧩 实战示例：检测组合键 Ctrl + S

document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.key.toLowerCase() === 's') {
    e.preventDefault(); // 阻止浏览器保存行为
    alert('已触发 Ctrl + S');
  }
});

✅ 总结对比表

事件名	触发时机	是否支持所有键	是否被废弃
`keydown`	键按下时	✅ 是	❌ 否
`keypress`	字符键按下时	❌ 仅字符键	⚠️ 是
`keyup`	键释放时	✅ 是	❌ 否

📌 小贴士

开发中推荐使用 keydown + keyup，不要再使用 keypress。
若需判断组合键（如 Ctrl + S、Alt + F4），可配合 e.ctrlKey、e.altKey 使用。
e.keyCode 虽然仍可用，但已被标准废弃，应改用 e.key 和 e.code。

利用左右上下，让页面中的方块移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.circle {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>

		<div class="circle" id="box1">

		</div>
	</body>
	<script type="text/javascript">
		let box1 = document.getElementById("box1");

		document.onkeydown = function(event) {
	
			event = event || window.event;
			if (event.keyCode == 37) {
				box1.style.left = box1.offsetLeft- 10 +"px";
				console.log(box1.style.left)
			}
			if (event.keyCode == 39) {
				box1.style.left = box1.offsetLeft+10 +"px";
				console.log(box1.style.left)
			}
			if (event.keyCode ==38) {
				box1.style.top = box1.offsetTop-10 +"px";
				console.log(box1.style.top)
				
			}
			if (event.keyCode ==40) {
				box1.style.top = box1.offsetTop+10 +"px";
				console.log(box1.style.top)
			}
		
		
			return false
		}
	</script>
</html>