跨浏览器的事件处理

1. event对象
2. 事件处理程序
3. 添加多个事件处理程序
4. 跨浏览器的事件处理
5. 实例实现

event对象

（1）兼容DOM的浏览器会将一个event对象传入事件处理程序中，event对象主要的属性/方法有：
preventDefault（）：取消事件的默认行为；
target：事件的目标
type：被触发的事件类型
（2）IE中的事件对象：在使用DOM0级方法添加事件处理程序时，event对象作为window对象的属性存在，IE中的事件对象具有的属性为：
returnValue：值设为false时，可以取消默认行为
srcElement：事件的目标
type：被触发的事件类型

事件处理程序

（1）DOM0级事件处理程序
形如：
element.οnclick=function{
//事件处理内容
};
对于删除事件处理程序，DOM0级是这样实现的：
Element.οnclick=null;
其中，DOM0级事件处理程序是在元素的作用于中进行的。
（2）DOM2级事件处理程序
DOM2级提供了addEventListener()与removeEventListener()两个方法
element.addEventListener(”click”,function{
//事件处理内容
},false);
对于删除事件处理程序，只需要在removeEventListener()方法中传入与addEventListener()相同的参数即可完成。
element.removeEventListener(”click”,function{
//事件处理内容
},false);
其中，第3个参数为false代表在冒泡阶段调用事件处理程序，DOM2级事件处理程序也是在元素的作用于中进行的。

（3）IE事件处理程序
IE实现了attachEvent()与detachEvent()两个方法。
element.attachEvent((”onclick”,function{
//事件处理内容
});

对于删除事件处理程序
element.detachEvent(”onclick”,function{
//事件处理内容
});
其中，IE事件处理程序，事件在全局作用域中运行。

添加多个事件处理程序

只有DOM2级事件处理程序和IE事件处理程序可以添加多个事件处理程序，其中：
（1）DOM2级事件处理程序在处理同一个按钮添加多个事件处理程序的问题时，事件处理程序会按照添加的顺序触发
（2）IE事件处理程序在处理同一个按钮添加多个事件处理程序的问题时，事件处理程序不是按照添加的顺序触发，而是以相反的顺序触发

跨浏览器的事件处理

思路：添加事件处理程序时：先检测是否存在DOM2级的方法，在检测是否存在IE的方法，如果都不存在，就使用DOM0级的方法

var EventUtil={
	getEvent:function(event){
		return event?event:window.event;
	},
	getTarget:function(event){
		return event.target||event.srcElement;
	},
	addHandler: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;
		}
	},
	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;
		}
	},
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault();
		}else{
			event.returnValue=false;
		}
	}
}

实例实现

在本节的实例实现中，主要利用上述EventUtil对象实现一个click事件（点击页面中的“赞”对应的 标签后，“赞”变为“取消赞”）
在未添加事件处理程序时，页面显示如下：

在对“赞”对应的节点添加事件处理程序的效果如下：

部分源代码如下：

EventUtil.addHandler(window,"load",function(){
var praise=document.getElementsByClassName("praise")[0];
	EventUtil.addHandler(praise,"click",function(e){
		e=EventUtil.getEvent(e);
		var target=EventUtil.getTarget(e);
		var praisetotal=document.getElementsByClassName("praises-total")[0];
		var count=parseInt(praisetotal.getAttribute("total"));
		var text=target.innerHTML;
		var newcount;
		if(text=="赞"){
			newcount=count+1;
			praisetotal.innerHTML=(newcount==1)?"我觉得很赞":"我和"+countnumber+"人觉得很赞";
		//praiseElement.setAttribute("total",newTotal);
		target.innerHTML="取消赞";

	}else{
		newcount=count-1;
		praisetotal.innerHTML=(newcount==0)?"":newcount+"人觉得很赞";
		//praiseElement.setAttribute("total",newTotal);//更新total属性
		target.innerHTML="赞";
	}
	praisetotal.setAttribute("total",newcount);//更新total属性
	praisetotal.style.display=(newcount==0)?"none":"block";
});
})