Javascript的事件处理,一直都是JS爱好者们比较感冒的一个核心技术,我也不例外,在此,将我对JS的事件处理理解的一些东西,分享给大家
//定义 EventUtil 对象 var EventUtil = new Object; //添加事件处理 EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler){ if(oTarget.addEventListener) {//firefox oTarget.addEventListener(sEventType, fnHandler, false); } else if(oTarget.attachEvent) {//IE oTarget.attachEvent("on"+sEventType, fnHandler); } else {//others oTarget["on" + sEventType] = fnHandler; } }; //删除事件处理 EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler){ if(oTarget.removeEventListener) {//firefox oTarget.removeEventListener(sEventType, fnHandler, false); } else if(oTarget.detachEvent) {//IE oTarget.detachEvent("on"+sEventType, fnHandler); } else {//others oTarget["on" + sEventType] = null; } }; //事件格式化,将IE下的对象尽可能的调整为DOM的事件模型 EventUtil.formatEvent = function(oEvent){ var isIE = Validate_Browser("ie"); var isWin= Validate_System("win"); if(isIE && isWin){ oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keycode : 0; oEvent.eventPhase = 2; oEvent.isChar = (oEvent.charCode > 0); oEvent.pageX = oEvent.clientX + document.body.scrollLeft; oEvent.pageY = oEvent.clientY + document.body.scrollTop; oEvent.preventDefault = function(){ this.returnValue = false; }; if(oEvent.type == "mouseout"){ oEvent.relatedTarget = oEvent.toElement; } else if (oEvent.Type == "mouseover") { oEvent.relatedTarget = oEvent.fromElement; } oEvent.stopPropagation = function(){ this.cancelBubble = true; }; oEvent.target = oEvent.srcElement; oEvent.time = (new Date()).getTime(); } return oEvent; }; //获得事件对象 EventUtil.getEvent = function (){ if(window.event){ return this.formatEvent(window.event); } else { return EventUtil.getEvent.caller.arguments[0]; } }; //加载窗体的同时,给对象附加事件处理函数 EventUtil.addEventHandler(window, "load", function(){ var oDiv = document.getElementById("divObj"); var oDivDel = document.getElementById("divDel"); EventUtil.addEventHandler(oDiv, "mouseover", handleEvent); EventUtil.addEventHandler(oDiv, "mouseout", handleEvent); EventUtil.addEventHandler(oDiv, "mousedown", handleEvent); EventUtil.addEventHandler(oDiv, "mouseup", handleEvent); EventUtil.addEventHandler(oDiv, "click", handleEvent); EventUtil.addEventHandler(oDiv, "dblclick", handleEvent); EventUtil.addEventHandler(oDivDel, "click", RemoveEvent); }); function RemoveEvent (){ var oDiv = document.getElementById("divObj"); var oDivDel = document.getElementById("divDel"); EventUtil.removeEventHandler(oDiv, "mouseover", handleEvent); EventUtil.removeEventHandler(oDiv, "mouseout", handleEvent); EventUtil.removeEventHandler(oDiv, "mousedown", handleEvent); EventUtil.removeEventHandler(oDiv, "mouseup", handleEvent); EventUtil.removeEventHandler(oDiv, "click", handleEvent); EventUtil.removeEventHandler(oDiv, "dblclick", handleEvent); EventUtil.removeEventHandler(oDivDel, "click", RemoveEvent); var oTextMsg = document.getElementById("oTextMsg");oTextMsg.value = "附加事件已经清除";} function handleEvent(){ try{ var oEvent = EventUtil.getEvent(); var oTextMsg = document.getElementById("oTextMsg"); oTextMsg.value = ""; oTextMsg.value += "/n>" + oEvent.type; oTextMsg.value += "/n target is " + oEvent.target.tagName; if(oEvent.relatedTarget) { oTextMsg.value += "/n relatedTarget is " + oEvent.relatedTarget.tagName; } } catch(e) { alert(e.toString()); //这个异常,等待解决 } }
下面放入HTML代码
<div style="background:#336600; width:200px;" id="divObj">Add Event</div>
<div style="background:#99FF00; width:200px;" id="divDel">Remove Event(when onclick)</div>
<textarea id="oTextMsg" cols="60" rows="10"></textarea>