JavaScript事件机制及阻止冒泡与默认行为方法

• 调用 event.preventDefault() 即可取消该默认动作，但事件仍会继续冒泡（除非额外调用 stopPropagation）
• 常见场景：用 JS 处理表单提交（如发 Ajax），必须在 submit 事件中调用它，否则页面会刷新
• 对键盘事件（如 Enter 触发搜索），也常需 preventDefault() 防止意外换行或提交

一个典型例子：自定义下拉菜单

假设你有一个点击展开的菜单，点击菜单项后关闭，但点击外部区域也要关闭。如果没处理好冒泡和默认行为，就容易出现点菜单项时菜单闪闭、或点击链接跳走了。

• 菜单按钮点击：调用 preventDefault() 防止链接跳转，再用 toggleMenu()
• 菜单项点击：调用 stopPropagation()，避免事件冒泡到 document 的隐藏监听器
• document 点击监听器：只在点击非菜单区域时隐藏菜单，不干扰菜单内部操作

小技巧：用 passive 和 once 提升体验

对于滚动、触摸等高频事件，可以加选项优化性能：

• { passive: true } 告诉浏览器你不会调用 preventDefault()（比如只是读取滚动位置），让浏览器更流畅地处理原生滚动
• { once: true } 让监听器只执行一次，适合初始化或一次性操作，省去手动 removeEventListener
• 两者可组合使用，例如：element.addEventListener('click', handler, { once: true })

今天关于《JavaScript事件机制及阻止冒泡与默认行为方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！