本文提供了一段用于在 JavaScript 中动态添加和移除事件监听器的兼容代码。通过判断浏览器是否支持 attachEvent 或 addEventListener,实现了对旧版 IE 与现代标准浏览器的兼容处理。示例展示了如何为 document 对象绑定并解绑 onclick 事件,适用于需要动态管理事件绑定的场景。
//由 xmg 提供
事件监听与卸载的兼容实现
<script>
function addEvent(obj, eventName, eventFunc) {
if (obj.attachEvent) {
obj.attachEvent(eventName, eventFunc);
} else if (obj.addEventListener) {
eventName = eventName.toString().replace(/on(.*)/i, '$1');
obj.addEventListener(eventName, eventFunc, true);
}
}
function delEvent(obj, eventName, eventFunc) {
if (obj.detachEvent)
obj.detachEvent(eventName, eventFunc)
else if (obj.removeEventListener) {
eventName = eventName.toString().replace(/on(.*)/i, '$1');
obj.removeEventListener(eventName, eventFunc, true);
}
}
</script>
HTML 页面结构与交互示例
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<button onclick=addEvent(document, "onclick", test1)>add1</button><br>
<button onclick=delEvent(document, "onclick", test1)>del1</button><br>
<button onclick=addEvent(document, "onclick", test2)>add2</button><br>
<button onclick=delEvent(document, "onclick", test2)>del2</button><br>
<script>
function test1() {
alert("test1")
}
function test2() {
alert("test2")
}
document.onclick = function () {
alert(1)
}
</script>
</BODY>
</HTML>