低版本ie事件委托需手动实现:统一事件流模型,用srcelement获取目标并跳过文本节点,通过遍历祖先匹配选择器,显式绑定this上下文,自定义ismatch函数替代matches()。

事件委托在低版本 IE(如 IE6–IE8)中要真正“完美降级”,核心不是简单替换 API,而是统一事件流模型、目标识别逻辑和事件对象访问方式。IE 的 attachEvent 本质只支持冒泡阶段,且 this 指向 window、不支持 event.target,必须靠 event.srcElement 和手动事件路径回溯来模拟委托行为。
用 attachEvent 绑定父容器,但需手动捕获触发源
低版本 IE 不支持原生事件委托(即无法像现代浏览器那样监听父元素后自动获取 event.target 并判断是否匹配子选择器),所以必须在事件处理函数内主动遍历事件源及其祖先节点:
- 使用
attachEvent('on' + type, handler)绑定到父元素(如<ul id="list"></ul>) - 在 handler 中先获取兼容的事件对象:
var e = event || window.event - 再获取原始触发元素:
var target = e.target || e.srcElement - 用
while循环向上查找匹配的选择器(例如target.tagName === 'LI'或target.className === 'item')
srcElement 是唯一可靠的目标标识,但需注意文本节点陷阱
srcElement 在 IE 中返回的是实际被点击的 DOM 节点,但它可能是一个文本节点(#text),而非你期望的 <li> 或 <button></button>。因此不能直接判断 target.tagName,得先跳过文本节点:
- 写一个安全的
getRealTarget工具函数:function getRealTarget(e) {<br> var t = (e.target || e.srcElement);<br> while (t && t.nodeType !== 1) t = t.parentNode;<br> return t;<br>} - 之后再做类型/属性判断,比如
if (realTarget && realTarget.nodeName === 'LI')
避免 this 失效,显式传入或缓存上下文
attachEvent 中 handler 的 this 永远是 window,无法像 addEventListener 那样自然指向绑定元素。若需访问父容器或维护作用域,有两类稳妥做法:
- 把父元素作为闭包变量引用:
var list = document.getElementById('list'); list.attachEvent('onclick', function(e) { ... }); - 或用
call/apply手动绑定:handler.call(list, e),让 handler 内部的this指向list
委托逻辑必须手动实现,不能依赖事件流自动分发
现代事件委托依赖冒泡 + event.target + matches(),而 IE8 及以下没有 matches 方法,也没有 closest()。你需要自己实现选择器匹配逻辑:
- 最简方式:用
nodeName、className、id等属性做字符串比对(适合固定结构) - 稍进阶:手写简易 CSS 选择器解析器(如支持
'li[data-id]'就需检查target.getAttribute('data-id')是否存在) - 推荐封装一个
isMatch(target, selector)函数,内部用Array.prototype.indexOf或正则辅助判断
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











