跨浏览器事件EventUtil

<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.csdn.net/guoyz_1/article/details/5521008

时间: 2024-10-05 19:37:50

跨浏览器事件EventUtil的相关文章

跨浏览器事件处理程序

//跨浏览器事件处理程序 var eventUtil = { //添加句柄 addHandler:function(element,type,handle){ if(element.addEventListener){ element.addEventListener(type,handle,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handle); }else{ element['on' + typ

跨浏览器事件对象代码

<script type="text/javascript"> var EventUtil = { addHandler:function(element,type,handler){ if (element.addEventListener) { element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+ty

js跨浏览器事件处理程序

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="myDiv"> aaaaaaaaaaaaaaaaaaa </div> <ul id="myMenu" style="position:absolute;visibility:hidd

跨浏览器事件对象

var EventUtil = { addHandler: function(elem,type,handler){ if (elem.addEventListener) { elem.addEventListener(type, handler, false); }else if(elem.attachEvent){ elem.attachEvent('on'+type,handler); }else{ elem["on"+type] = handler; } }, removeHa

常用跨浏览器事件封装

1 /** 2 * @author [xiaoruo] 3 * [EventUtil 跨浏览器事件对象] 4 * @type {Object} 5 */ 6 var EventUtil = { 7 /** 8 * [addHandler 添加跨浏览器事件] 9 * @param {[Object]} element [事件对象] 10 * @param {[String]} type [事件类型] 11 * @param {[Function]} handler [事件函数] 12 */ 13

javascript跨浏览器事件对象类库

一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 //跨浏览器事件对象的操作 var EventUtil = { //绑定事件处理程序 addHandler : function(element, type, handler){ if(element.addEventListener){//DOM2级事件处理程序 element.addEventLis

javascript跨浏览器事件绑定

//跨浏览器事件绑定 function addEvent(obj,type,fn){ //obj目标对象, type事件类型 注意是:"load" ,fn函数回调 if (typeof obj.addEventListener !="undefined"){ //W3C方法 obj.addEventListener(type,fn,false); } else if (typeof obj.attachEvent !="undefined"){

跨浏览器事件对象封装

封装一个能够隔离浏览器差异的JavaScript库EventUtil,主要是使用能力检测. var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler)

Event Handler 事件处理程序 2 ---跨浏览器事件对象《高程3》

0 Event Object导论 支持DOM0.DOM2的浏览器和IE浏览器实现事件处理程序的不同,除了体现在添加事件处理程序的不同上,还体现在event对象的实现差异上,包括具体的属性和方法.在触发DOM上的某个事件时,都会产生一个event对象,这个对象包含着所有与事件有关的信息.一旦事件处理程序执行完成,event对象就会被销毁.所有浏览器对event的支持方式包括:DOM事件对象和IE事件对象. 1.1 DOM0和DOM2支持的Event对象(针对IE之外的浏览器) 兼容 DOM 的浏览