Javascript 动态给控件添加事件-优快云博客

本文介绍了一种使用JavaScript实现的跨浏览器的事件处理机制，包括添加和移除事件监听器的方法。通过示例展示了如何为DOM元素添加点击事件，并提供了移除事件监听的功能。

<html>
    <head>
        <title>Add/Remove Event Handlers Example</title>
        <script type="text/javascript">
var EventUtil = new Object;
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
//其它浏览器的事件代码: Mozilla, Netscape, Firefox
//添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件，不用加on 
	oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
//IE 的事件代码 在原先事件上添加 add 方法
	oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
	oTarget["on" + sEventType] = fnHandler;
    }
};

EventUtil.removeEventHandler = function (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;
    }
};


function handleClick() {
    alert("Click!");
    var oDiv = document.getElementById("div1");
    EventUtil.removeEventHandler(oDiv, "click", handleClick);
}

window.onload = function() {
    var oDiv = document.getElementById("div1");                
    EventUtil.addEventHandler(oDiv, "click", handleClick);
}
        </script>
    </head>
    <body>

         <div id="div1" style="background-color: red; width: 100px; height: 100px"></div>
    </body>
</html>