DOM 事件 & HTML 标签属性速查手册

以下是一份 DOM 事件 & HTML 标签属性速查手册，涵盖常用场景和示例，助你快速查阅和使用：

一、DOM 事件速查表

1. 鼠标事件

事件名	触发时机	适用元素	示例代码
click	元素被点击	任意可见元素	button.addEventListener('click', () => { ... })
dblclick	元素被双击	任意可见元素	div.addEventListener('dblclick', handleDoubleClick)
mouseover	鼠标移入元素	任意可见元素	img.onmouseover = () => { ... }
mouseout	鼠标移出元素	任意可见元素	div.addEventListener('mouseout', logExit)
mousemove	鼠标在元素内移动	任意可见元素	canvas.onmousemove = trackPosition
contextmenu	右键点击元素（弹出菜单前）	任意元素	document.oncontextmenu = blockDefaultMenu

2. 键盘事件

事件名	触发时机	适用元素	示例代码
keydown	键盘按键按下时	可聚焦元素（如 input）	input.addEventListener('keydown', (e) => { if (e.key === 'Enter') submit() })
keyup	键盘按键释放时	可聚焦元素	input.onkeyup = validateInput
keypress	按键按下并产生字符时（已弃用，建议用 keydown）	可聚焦元素	-

3. 表单事件

事件名	触发时机	适用元素	示例代码
submit	表单提交时	<form>	form.onsubmit = (e) => { e.preventDefault(); ... }
change	表单元素值改变并失焦后	input, select, textarea	select.addEventListener('change', updateOptions)
input	表单元素值实时改变时	input, textarea	input.oninput = debounce(search, 300)
focus	元素获得焦点时	可聚焦元素