跨浏览器的事件处理程序

我们第一个要创建的方法是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;
        }
    }
}