JavaScript添加及删除事件的方法实现

江岸

发布时间：2026-10-13| 5人浏览过

原创

本文详细讲解了如何在JavaScript中通过不同的方式添加和删除事件，涵盖兼容性处理及具体代码示例。

通用事件处理方法

在JavaScript中，事件监听器是Web开发的重要组成部分。为了实现跨浏览器的兼容性，我们可以创建一个通用的事件处理工具对象。以下是一个简化的例子：

// 添加事件处理程序
function AddEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) { // 适用于大多数非IE浏览器
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) { // 适用于旧版IE
        oTarget.attachEvent('on' + sEventType, fnHandler);
    } else {
        oTarget['on' + sEventType] = fnHandler;
    }
}

// 移除事件处理程序
function RemoveEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent('on' + sEventType, fnHandler);
    } else {
        oTarget['on' + sEventType] = null;
    }
}

完整实例：一次性点击事件

接下来展示一个完整的HTML页面示例，演示如何在一个DIV元素上绑定一次性的点击事件。第一次点击会触发弹窗并移除该事件，之后再点击则无任何反应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript添加、删除事件的方法</title>
    <script type="text/javascript">
        var EventUtil = new Object;
        
        // 添加事件
        EventUtil.addEvent = function(oTarget, sEventType, funName) {
            if (oTarget.addEventListener) {
                oTarget.addEventListener(sEventType, funName, false);
            } else if (oTarget.attachEvent) {
                oTarget.attachEvent("on" + sEventType, funName);
            } else {
                oTarget["on" + sEventType] = funName;
            }
        };

        // 移除事件
        EventUtil.removeEvent = function(oTarget, sEventType, funName) {
            if (oTarget.removeEventListener) {
                oTarget.removeEventListener(sEventType, funName, false);
            } else if (oTarget.detachEvent) {
                oTarget.detachEvent("on" + sEventType, funName);
            } else {
                oTarget["on" + sEventType] = null;
            }
        };

        function removeClick() {
            alert("click");
            var oDiv = document.getElementById("odiv");
            oDiv.style.cursor = "auto";
            EventUtil.removeEvent(oDiv, "click", removeClick);
        }

        function addLoadEvent(func) {
            var oldonload = window.onload;
            if (typeof window.onload != "function") {
                window.onload = func;
            } else {
                window.onload = function() {
                    oldonload();
                    func();
                };
            }
        }

        addLoadEvent(addClick);

        function addClick() {
            var oDiv = document.getElementById("odiv");
            oDiv.style.cursor = "pointer";
            EventUtil.addEvent(oDiv, "click", removeClick);
        }
    </script>
</head>
<body>
    <p>第一次点的时候弹出警告，并移除click事件,再点点击就失效了</p>
    <div id="odiv" style="background:#003399; height:70px; width:126px; margin:0 auto; color:skyblue; cursor: pointer;">
        第一次警告，第二次没反应！
    </div>
</body>
</html>

注意事项与最佳实践

在使用上述方法时，需要注意以下几点：

事件名称一致性：在移除事件时传入的参数必须与绑定时完全一致，否则无法成功移除。
浏览器兼容性：虽然现代浏览器大多支持 addEventListener 和 removeEventListener，但在处理老旧版本的Internet Explorer时，仍需使用 attachEvent 和 detachEvent。
内存泄漏风险：确保在不再需要时使用 removeEventListener 清理事件，以避免潜在的内存泄漏问题。