跨浏览器的事件处理程序

4000
我们第一个要创建的方法是

addHandler()

它的职责是视情况分别使用DOM0级方法、DOM2级方法或者IE方法来添加事件。这个方法属于一个名叫EventUtil的对象。

addHandler()

方法接收三个参数：要操作的元素、事件名称、事件处理程序函数。

addHandler()

对应的方法是

removeHandler

，他也接收相同的参数。这个方法的职责是移除之前添加的事件处理程序—-无论事件处理程序是采用什么方法添加进去的，如果其他方法无效则采用DOM0级方法。

var EventUtil={
addHander:function(element,type,func){
if (element.addEventListener) {
element.addEventListener(type,func,false)
}else if (element.attachEvent) {
element.attachEvent("on"+type,func)
}else{
element["on"+type]=func;
}
},
removeHandler:function(element,type,func){
if (element.removeEventListener) {
element.removeEventListener(type,func,false)
}else if(element.detachEvent){
element.detachEvent("on"+type,func);
}else{
element["on"+type]=null;
}
}
}

事件对象

当我们注册事件处理程序的时候，我们会产生一个事件对象event，所有浏览器都支持这个event对象，但是支持方式不同。兼容DOM的浏览器会将一个event对象出传入事件处理程序中。

var btn=document.getElementById("btn");
btn.onclick=function(){
alert(event.type)
}
btn.addEventListener("click",function(){
alert(event.type)
},false)

属性

bubles：表示事件是否冒泡

cancelable：表示是否可以取消事件的默认行为

currentTarget：表示其事件处理程序当前正在处理的那个元素

defaultPrevented：表示是否调用了preventDefault

detail：与事件相关的细节

eventPhase：调用事件处理程序的阶段：1表示捕获阶段，2表示正在目标阶段，3表示冒泡阶段

target：事件的目标

trusted：为true表示是浏览器生成的。为false表示事件由开发人员创建的

type：事件类型

view：与事件相关的抽象视图，等同于发生事情的window。

方法

preventeDefault()：取消事件的默认行为。如果cancelable是true则可以调用这个方法

stopImmediatePropagation()：取消事件的进一步捕获或者冒泡，同时组织任何事件处理程序被调用

stopPropagation()：取消事件的进一步冒泡，如果bubles为true，则可以使用这个方法

一个函数处理多个程序

var btn=document.getElementById("btn");
function handler(){
switch(event.type){
case "click":
alert("hello,click");
break;
case 'mouseover':
event.target.style.border="solid 1px gray";
break;
case "mouseout":
// alert("hello,facus");
event.target.style.border="";
break;
}
}
btn.onclick=handler;
btn.onmouseout=handler;
btn.onmouseover=handler;

很多时候我们会用到a元素，点击触发事件。但是a还有自己的默认行为就是超链接，那我们怎么组织特定事件的默认行为呢？我们可以使用事件的preventDefault()方法。

var asign=document.getElementById("Ahref");
asign.onclick=function(){
asign.style.display="inline-block"
asign.style.width="100px";
asign.style.height="100px";
asign.style.backgroundColor="red";
event.preventDefault();
alert("ok")
}

当我们要知道事件发生在哪个阶段的时候，我们课哟通过eventPhase属性来判断是处在捕获阶段还是处在冒泡阶段，还是处在目标阶段。

var btn=document.getElementById("btn");
btn.onclick=function(){
alert(event.eventPhase);//1表示在捕获阶段，2表示处在目标阶段，3表示处在目标阶段
}

在IE中，event对象就有所不同，在使用DOM0级方法添加事件处理程序的时候，event对象作为window对象的一个属性存在

var btn=document.getElementById("btn");
btn.onclick=function(){
var event=window.event;
alert(event.type);
}

在IE中event有不同的属性和方法

cancelBubble：默认值为false，但是设置为true则可以取消事件冒泡

returnValue：默认值为true，设置值为false可以取消元素的默认事件

srcElement：事件的目标值

type：事件类型

<a href="http://www.burningay.top" id="Ahref">666</a>
var asign=document.getElementById("Ahref");
asign.onclick=function(){
alert("hello");
alert(window.event.srcElement);//http://www.burningay.top
event.returnValue=false//阻止默认事件
}

我们为了解决这种方法，可以指定一个跨浏览器对象，就像之前的EventUtil对象

var EventUtil={
addHandler:function(element,func,type){
if (element.addEventListener) {
element.addEventListener(type,func,false)
}else if(element.attachEvent){
element.attachEvent("on"+type,func)
}else{
element["on"+type]=func
}
},
removeHandler:function(element,func,type){
if (element.removeEventListener) {
element.removeEventListener(type,func,false)
}else if (element.detachEvent) {
element.detachEvent("on"+type,func)
}else{
element["on"+type]=null;
}
},
getEvent:function(){
return event?event:window.event;
},
getTarget:function(){
return event.target||event.srcElement;
},
preventDefault:function(){
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(){
if (event.stopPropagation) {
event.stopPropagation()
}else{
event.cancelBubble=true;
}
}
}