`

Javascript 动态给控件添加事件

阅读更多
<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>
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics