Javascript学习笔记之事件篇

最新推荐文章于 2025-12-11 21:57:31 发布

最新推荐文章于 2025-12-11 21:57:31 发布 · 109 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个通用的JavaScript事件处理工具EventUtil，它提供了一种跨浏览器兼容的方式添加和移除事件监听器，并对不同浏览器下的事件对象进行了统一处理。

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>