跨浏览器的事件对象

test.html

<!document html>
<html>
	<body>
		<button id="mybth"> </button>
		<script src="EventUtil.js"></script>
	</body>
</html>

EventUtil.js

/*
	保证处理事件的代码在大多数浏览器中都能一致运行。
*/
var EventUtil = {
	addHander: function(element, type, handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}
		else if(element.attachEvent){
			element.attachEvent("on" + type, handler);
		}
		else{
			element["on" + type] = handler;
		}
	},
	
	getEvent: function(event){	//返回对event对象的引用
		return event ? event : window.event;
	},
	
	getTarget: function(event){	//返回事件的目标
		return event.target || event.srcElement;
	},
	
	preventDefault: function(event){	//取消事件的默认行为
		if(event.preventDefault){
			event.preventDefault();
		}
		else{
			event.returnValue = false;
		}
	},
	
	removeHandler: function(element, type, handler){
		if(element.removeEventListener){
			element.removeEventListener(type, handler, false);
		}
		else if(element.detachEvent){
			element.detachEvent("on" + type, handler);
		}
		else{
			element["on" + type] = null;
		}
	},
	stopPropagation: function(event){	//尝试使用DOM方法阻止事件流,否则使用cancelBubble属性。
		if(event.stopPropagation){
			event.stopPropagation();
		}
		else{
			event.cancelBubble = true; 
		}
	},
};
	

var bth = document.getElementById("mybth");
var handler= function(){
	alert("Clicked");
};
EventUtil.addHander(bth, "click", handler);


你可能感兴趣的:(JavaScript)