🖱
DOM 事件速查
浏览器常见 DOM 事件速查，含触发时机。
本地处理 · 不上传
加载工具中…
相关：DOM事件 · JS事件 · click · input · keydown
DOM 事件速查列出常见事件的触发时机与事件对象属性，涵盖鼠标、键盘、表单、触摸与页面生命周期事件。
使用步骤
- 先确定要监听的是鼠标、键盘、表单还是生命周期事件
- 看清事件的触发时机与是否冒泡
- 确认需不需要在捕获阶段监听
- 高频事件如 scroll、resize 记得做节流
使用场景
- 查找需要监听的事件
- 理解事件的触发顺序
- 处理事件冒泡与捕获
- 编写事件处理逻辑
小贴士
- 事件先捕获后冒泡。绑定时的第三个参数决定在哪个阶段触发，默认是冒泡阶段。
- 事件委托利用冒泡，在父元素上统一监听而不必为每个子元素绑定，处理动态列表时既省内存又省事。
- input 事件在每次输入时触发，change 事件在失去焦点且值改变时触发，实时校验应该用前者。
常见问题
事件冒泡是什么？
事件从触发元素向上逐级传递到祖先元素。这让你可以在父元素上统一处理子元素的事件（事件委托），对动态添加的元素也自动生效，比逐个绑定高效得多。
input 和 change 有什么区别？
input 在每次值变化时立即触发，适合实时搜索与校验；change 在元素失去焦点且值确实改变后才触发，适合提交前的最终校验。用错会导致校验时机不符预期。
怎么阻止事件继续传播？
stopPropagation 阻止事件继续冒泡，preventDefault 阻止浏览器的默认行为（如链接跳转、表单提交）。两者作用不同，常被混淆——阻止跳转要用后者。
DOM 事件速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用DOM 事件速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。