事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，event包含所有与事件有关的信息。

---

1. DOM中的事件对象
2. IE中的事件对象
3. 跨浏览器的事件对象

---

1.【DOM中的事件对象】

event的几个常用属性和方法

• type              事件类型• target            事件的实际目标• currentTarget     当前正在处理事件的元素（等于事件处理程序的this值）• eventPhase        调用事件处理程序的阶段（1：捕获 2：处于目标 3：冒泡）• preventDefault()  取消事件的默认行为（当cancelable属性为true时可使用）• stopPropagation() 取消事件的进一步传播（捕获or冒泡）

事件传播顺序：    var btn = document.getElementById("btn");    //目标阶段    btn.onclick = function(event){        alert(event.eventPhase); //2    }    //捕获阶段    document.body.addEventListener("click",function(event){            alert(event.eventPhase); //1    },true);    //冒泡阶段    document.body.onclick = function(event){        alert(event.eventPhase); //3    };// 1 2 3

---

2.【IE中的事件对象】

event属性

• type             事件类型• srcElement       事件的实际目标（与DOM中event的target一样）• cancelBubble     当为true时，取消事件的进一步传播（冒泡）与DOM中event的stopPropagation()一样• returnValue      当为false时，取消事件的默认行为（与DOM中event的preventDefault()一样）

var btn = document.getElementById("btn");    //DOM0级    btn.onclick = function(event){        alert(this); //[object HTMLInputElement]        alert(event);//[object MouseEvent]        alert(event.srcElement);//[object HTMLInputElement]    };    //IE    btn.attachEvent("onclick",function(event){        alert(this);   //[object window]   因为IE事件处理程序在全局作用域中，this指向window        alert(event);   //[object MSEventObj]        alert(event.srcElement); //[object HTMLInputElement]});

---

3.【跨浏览器的事件对象】

function handler(){    alert("click!");};var EventUnit = {    addHandler: function (element, type, handler) {        //DOM2级事件处理程序        if (element.addEventListener) {            element.addEventListener(type, handler, false);        }        //IE事件处理程序        else if (element.attachEvent) {            element.attachEvent("on" + type, handler);        }        //DOM0级事件处理程序        else {            element["on" + type] = handler;        }    },    //获得event对象    getEvent: function(event){        return event ? event : window.event;    },    //获得事件的目标    getTarget: function(event){        return event.target || event.srcElement;    },    //取消事件的默认行为    preventDefault: function(event){        if(event.preventDefault){            event.preventDefault();        }        else{            event.returnValue = false;        }    },    removeHandler: function (element, type, handler) {        //DOM2级删除事件处理程序        if (element.removeEventListener) {            element.removeEventListener(type, handler, false);        }        //IE删除事件处理程序        else if (element.detachEvent) {            element.detachEvent("on" + type, handler);        }        //DOM0级删除事件处理程序        else {            element["on" + type] = null;        }    },    //阻止事件流的传播    stopPropagation: function(event){        if(event.stopPropagation){            event.stopPropagation();        }        else{            event.cancelBubble = true;        }    }};var btn = document.getElementById("btn");btn.onclick = function(){    var event = EventUnit.getEvent(event);  //放在开头，可确保以后随时使用event对象，不必考虑用户使用什么浏览器    var target = EventUnit.getTarget(event);//返回事件的目标    EventUnit.preventDefault(event); //取消事件的默认行为    EventUnit.stopPropagation(event); //阻止事件流}EventUnit.addHandler(btn,"click",handler); // 添加事件处理程序EventUnit.removeHandler(btn,"click",handler); //删除事件处理程序