🔍

首页Home › 开发工具Developer Tools

🖱️ JavaScript 事件大全(DOM 事件速查)JavaScript DOM Events Reference

常用 DOM 事件速查表:鼠标、指针、键盘、输入法、焦点、表单、触摸、拖放、剪贴板、页面生命周期、音视频、动画共 90 多个事件,列出事件对象类型、是否冒泡、能否取消、触发目标和说明,附实时事件测试区和监听代码生成。A quick reference for 90+ DOM events — mouse, pointer, keyboard, IME, focus, form, touch, drag and drop, clipboard, page lifecycle, media and animation — with the event interface, whether it bubbles or can be cancelled, its target and notes, plus a live event tester and listener code.

事件测试区Event tester

在这里点击、双击、右键、滚轮、拖动或按键Click, double-click, right-click, scroll, drag or press keys here

使用说明与常见问题How-to & FAQ

「JavaScript 事件大全(DOM 事件速查)」是什么?What is the JavaScript DOM Events Reference tool?

常用 DOM 事件速查表:鼠标、指针、键盘、输入法、焦点、表单、触摸、拖放、剪贴板、页面生命周期、音视频、动画共 90 多个事件,列出事件对象类型、是否冒泡、能否取消、触发目标和说明,附实时事件测试区和监听代码生成。A quick reference for 90+ DOM events — mouse, pointer, keyboard, IME, focus, form, touch, drag and drop, clipboard, page lifecycle, media and animation — with the event interface, whether it bubbles or can be cancelled, its target and notes, plus a live event tester and listener code.

如何使用「JavaScript 事件大全(DOM 事件速查)」?How do I use the JavaScript DOM Events Reference?

搜索事件名或说明,或按分类筛选;点击事件名生成 addEventListener 代码并复制。在「事件测试区」里点击、输入、拖动或粘贴,下方会实时列出触发的事件和顺序。Search by name or description, or filter by category; click an event name to copy addEventListener code. Click, type, drag or paste in the test area to see which events fire and in what order.

mouseover 和 mouseenter 有什么区别?mouseover vs mouseenter?

mouseover 会冒泡,鼠标在子元素之间移动时会反复触发;mouseenter 不冒泡,只在进入元素本身时触发一次,做悬停效果通常用 mouseenter/mouseleave 更省事。mouseover bubbles and refires as the pointer moves between children; mouseenter does not bubble and fires once when entering the element itself, which is usually simpler for hover effects.

中文输入时 input 事件触发太多怎么办?Too many input events while typing Chinese?

拼音组字过程中也会触发 input。可以在 compositionstart 时设置标记、compositionend 时清除,或者检查 e.isComposing,只在组字结束后处理。input also fires during pinyin composition. Set a flag on compositionstart and clear it on compositionend, or check e.isComposing, and only act once composition ends.

为什么 preventDefault() 对 touchstart/wheel 无效?Why doesn’t preventDefault() work on touchstart/wheel?

Chrome 等浏览器默认把 document 级的 touchstart、touchmove、wheel 监听当作 passive(被动)以提升滚动性能。需要阻止时显式传入 { passive: false }。Browsers treat document-level touchstart, touchmove and wheel listeners as passive by default for smooth scrolling. Pass { passive: false } explicitly when you need to cancel.

「JavaScript 事件大全(DOM 事件速查)」免费吗?数据会上传吗?Is the JavaScript DOM Events Reference free? Is my data uploaded?

「JavaScript 事件大全(DOM 事件速查)」完全免费,无需注册或安装,手机和电脑都能用;所有处理都在你的浏览器本地完成,输入的内容和文件不会上传到服务器。The JavaScript DOM Events Reference is completely free with no sign-up or install and works on phones and desktops; everything runs locally in your browser and nothing you enter is uploaded.

相关工具Related tools

⌨️ 键盘按键码查询JavaScript Keycode Tester⌨️ 键盘测试工具Keyboard Tester🟨 JS 格式化/压缩JavaScript Beautifier & Minifier👁️ HTML 在线运行预览HTML Live Preview / Editor🧪 正则表达式测试Regex Tester🧮 编程语言运算符优先级速查表Operator Precedence Table

← 全部工具All tools