Polyfill与MS Edge：为何无法获取DOM元素的事件函数？

这个问题我之前帮开发者排查过，本质是Web Components polyfill在兼容旧版Edge时的典型行为：当polyfill用自定义元素包装原生DOM元素后，直接访问元素的onchange这类DOM0级事件属性时，拿到的是包装元素的属性，而非原生元素上绑定的函数。虽然事件能正常触发（因为polyfill做了事件代理），但这些on*属性并没有被代理到包装层，所以你会得到undefined。

为什么会这样？ #

旧版Edge不支持原生Web Components，主流的polyfill（比如@webcomponents/webcomponentsjs）会创建一个自定义元素实例来“包裹”原生元素，以此模拟Web Components的特性。对于事件触发，polyfill会把所有事件监听器（包括通过onchange赋值的）代理到内部的原生元素上，所以事件能正常执行；但它并没有把原生元素的on*属性暴露到包装元素的实例上，导致直接访问时拿不到值。

解决方法 #

1. 优先使用标准事件API（强烈推荐）

放弃依赖on*属性，改用DOM2级事件标准的addEventListener和removeEventListener来管理事件。这种方式不仅完美兼容polyfill环境，还支持绑定多个事件处理函数，是现代前端事件管理的最佳实践：

// 绑定change事件
const element = document.getElementById('elementId');
element.addEventListener('change', function(event) {
  console.log('changed');
});

// 如果需要获取已绑定的监听器（生产环境慎用）
// 注意：getEventListeners是浏览器DevTools提供的API，不是标准JS API
// 生产环境建议自己维护一个监听器引用集合
const changeListeners = getEventListeners(element).change;

2. 访问polyfill内部的原生元素引用

如果你必须获取原有的onchange函数，可以尝试访问polyfill暴露的原生元素实例。不同polyfill的内部属性可能不同，以@webcomponents/webcomponentsjs为例，包装后的元素通常会在_impl或nativeElement属性中保存原生元素的引用：

const wrappedElement = document.getElementById('elementId');
// 尝试获取原生元素引用，不同polyfill可能属性名不同
const nativeElement = wrappedElement._impl || wrappedElement.nativeElement;
const fnOnChange = nativeElement.onchange; // 这里就能拿到正确的函数了

⚠️ 注意：这个方法依赖polyfill的内部实现，可能会随着polyfill版本更新而变化，所以只建议在没办法切换到标准API时临时使用。

3. 针对HTML内联绑定的特殊处理

如果你的onchange是通过HTML内联属性绑定的（比如<input id="elementId" onchange="handleChange()">），可以通过getAttribute拿到绑定的函数字符串，再转换为可执行函数：

const element = document.getElementById('elementId');
const onChangeStr = element.getAttribute('onchange');
// 注意：这种方式只适用于内联绑定，且需要确保函数在全局作用域可访问
const fnOnChange = new Function(onChangeStr);

总结 #

最稳妥的方案是切换到addEventListener的标准事件绑定方式，彻底避免依赖on*这类DOM0级属性——不仅能解决polyfill下的问题，也能让你的代码更健壮、更符合现代前端规范。

内容的提问来源于stack exchange，提问作者Akerus