HTML中事件对象event的常用属性和方法-html教程-PHP中文网

安全获取事件对象需兼容IE6–8：DOM0级用e = e || window.event，DOM2级参数必传，内联写法只能用window.event；target与currentTarget不同，IE用srcElement替代target；坐标属性参考系各异，拖拽用pageX/pageY，tooltip用clientX/clientY；preventDefault()仅对cancelable事件有效，stopPropagation()不阻当前阶段同级handler。

html中事件对象event的常用属性和方法

直接用 event 参数就能拿到事件对象，不用手动创建，也不用查全局变量——但得注意兼容写法和属性行为差异。

怎么安全地获取 event 对象

现代浏览器都支持把 event 作为回调函数的第一个参数传入，但 IE 6–8 只认 window.event。不处理这个，老项目或内网系统可能直接报 ReferenceError: event is not defined。

DOM0 级绑定（如 btn.onclick = function() {...}）：显式声明参数 function(e) { e = e || window.event; }
DOM2 级绑定（addEventListener）：参数必传，无需 fallback，e 总是有效
HTML 内联写法（onclick="handler()"）：必须用 window.event，因为没传参上下文

`target` 和 `currentTarget` 容易混淆的点

target 是真正被点击/触发的那个元素；currentTarget 是当前绑定事件监听器的那个元素。委托场景下两者几乎总是不同。

给绑 click，点里面某个
：e.target 是
，e.currentTarget 是
IE 6–8 不支持 target，得用 srcElement 替代，兼容写法：e.target || e.srcElement
this 在事件回调中等价于 currentTarget（除箭头函数外），但别在箭头函数里依赖 this 指向事件目标

坐标类属性 clientX/clientY vs pageX/pageY

它们返回鼠标位置，但参考系完全不同，滚动页面时数值表现差异极大。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

clientX/clientY：相对于**可视窗口左上角**，滚动不影响值
pageX/pageY：相对于**整个文档左上角**，滚动时会变
offsetX/offsetY：相对于**触发元素的 padding box 左上角**，但 Firefox 不支持 offsetY 的某些边界行为
做拖拽、定位弹层时，优先用 pageX/pageY；做 tooltip 贴近鼠标，用 clientX/clientY

阻止默认行为和冒泡的常见误用

preventDefault() 和 stopPropagation() 看似简单，但调用时机和条件容易出错。

preventDefault() 只对 cancelable === true 的事件有效，比如 click、submit 可以，但 scroll 不行
stopPropagation() 阻止的是**后续阶段的传播**，不影响当前阶段已注册的同级 handler；想彻底中断所有 handler，用 stopImmediatePropagation()
在表单 submit 事件里忘了 preventDefault()，页面就会跳转或刷新，Ajax 提交就失效
在委托场景下乱用 stopPropagation()，可能导致父级委托逻辑被意外截断