JavaScript 实现鼠标事件监听与卸载的兼容方案

作者:像素猫

时间:2026-10-31

浏览:140

本文提供了一段用于在 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>


实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章