跨浏览器事件EventUtil

最新推荐文章于 2020-02-15 23:27:45 发布

转载最新推荐文章于 2020-02-15 23:27:45 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/diantao/p/5209454.html

本文深入探讨了HTML、CSS、JavaScript等前端开发技术的核心概念、应用实践及最佳实践，帮助开发者掌握现代前端开发技能。

<div style="width: 150px; height: 150px; padding: 25px; border:1px solid blue; " id="divBox">
	<p style="width: 100px; height: 100px; padding:25px; border:1px solid red; " id="pBox">
		<span style="width:50px; height:50px; border:1px solid gray; display: block;" id="spanBox">span</span>
	</p>
</div>

var divBox = document.getElementById('divBox');
var pBox = document.getElementById("pBox");
var spanBox = document.getElementById("spanBox");
function handler(event){
	var target = EventUtil.target(EventUtil.event(event));
	switch(target.id){
			case "divBox":
				alert("this is divBox...");
				break;
			case "pBox":
				alert("this is pBox");
				break;
			case "spanBox":
				alert("this is spanBox...");
				break;

		}
}
EventUtil = {
	addEventListener:function(ele,type,callback,capture){
		if(window.addEventListener){
			ele.addEventListener(type,callback,capture);
		}else if(window.attachEvent){
			ele.attachEvent("on"+type,callback);
		}else{
			ele["on"+type] = callback;
		}
	},
	removeEventListener:function(){
		if(window.removeEventListener){
			ele.removeEventListener(type,callback,capture);
		}else if(window.detachEvent){
			ele.detachEvent("on"+type,callback);
		}else{
			ele["on"+type] = null;
		}
	},
	event:function(event){
		return event = event || window.event;
	},
	target:function(event){
		var target = event.target || event.srcElement;
		return target;
	},
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault();
		}else{
			event.returnValue = false;
		}
	}
}

EventUtil.addEventListener(divBox,"click",handler,false);

以上是本人自己写的，不是很全面，更全面的版本参考以下网址：

http://blog.youkuaiyun.com/guoyz_1/article/details/5521008

转载于:https://www.cnblogs.com/diantao/p/5209454.html