javascript 事件对象

在js中触发一个事件的时候，会产生一个事件对象，也就是函数处理程序中的event，通过event我们可以访问到所有与事件有关的信息，如事件的类型、事件发生对象等等。需要注意的是关于event对象IE 和 非IE在支持方式不同。

DOM中的事件对象

不管是标签内绑定事件，DOM0级还是DOM2级，事件处理程序都会传入一个event。

<button id="myBtn" onclick="alert(event.type)">按钮1</button>
...
var btn = document.getElementById("button");
btn.onclick = function(event){
    alert(event.type);
};
btn.addEventListener("click", function(event){
    alert(event.type);
});

单击按钮时，会输出事件的类型event.type，也就是click。
event中具有的属性和方法如下：

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	事件是否冒泡
cancelable	Boolean	只读	是否可以取消事件的默认行为
currentTarget	Element	只读	事件处理程序当前正在处理事件的元素
defaultPrevented	Boolean	只读	值为true时代表已经调用了preventDefault()(DOM3级事件中新增)
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段
preventDefault	Function	只读	取消事件的默认行为。当cancelable为true时可以使用这个方法
stopImmediatePropagation	Function	只读	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）
stopPropagation	Function	只读	取消事件的进一步捕获或冒泡。当bubbles为true时可以使用这个方法
target	Element	只读	事件的目标
trusted	Boolean	只读	为true表示浏览器生成，为false表示事件是由开发人员通过Javascript创建的（DOM3级事件中新增）
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象

target 和 currentTarget

首先注意到event中存在target和currentTarget，前者代表事件的目标，这个目标是事件触发的原始目标，后者代表当前事件进行到的目标（因为事件会捕获或冒泡，所以不一定是事件的原始目标）
当事件处理程序就在目标元素上时，这两者是一样的。

var btn = document.getElementById("button");
btn.onclick = function(event){
    console.log(this === event.target);  //true
    console.log(this === event.currentTarget);  //true
}

但是如果btn在一个div内，现在给btn的父节点添加监听：

<div id="btnWrap">
    <button id="button" onclick="alert(event.type)">按钮</button>
</div>

var btnWrap= document.getElementById("btnWrap");
btnWrap.onclick = function(event){
    console.log(event.target=== btn);  //true
    console.log(event.currentTarget=== btnWrap);  //true
}

点击按钮时，事件从按钮传到btnWrap，此时在btnWrap的事件处理程序中，事件的原始发生者target是btn，但是当前处理事件的是btnWrap。

cancelable 和 preventDefault()

想阻止特点事件的默认行为可以使用preventDefault方法，比较典型的是a标签的默认行为是打开其href属性指定的url，如果想阻止这个行为，在onclick事件处理程序中调用preventDefault方法即可。

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
}

需要注意的是只有cancelable为true的事件才能使用preventDefault方法取消默认行为。

stopPropagation()

stopPropagation可以立即停止事件在DOM中的传播，比如在某一个Div中有一些小按钮，根据事件冒泡，单击小按钮时同样会触发div的事件，为了防止这种情况可以使用stopPropagation()。

var btn = document.getElementById("button");
btn.onclick = function(event){
    event.stopPropagation();
}
var btnWrap= document.getElementById("btnWrap");
btnWrap.onclick = function(event){
    console.log("事件到达！");  //不会输出
}

IE中的事件对象

与DOM中的事件对象不同，IE中的event对象具有不同的属性，而且访问的方式不同。
在IE中通过DOM0级事件绑定的事件，event并不是一个局部变量，而是作为window的一个属性存在。

var btn = document.getElementById("button");
btn.onclick = function(event){
    alert(event.type);   //出错！
}
btn.onclick = function(){
    alert(window.event.type);   //输出click
}

但是如果事件是通过attachEvent添加或者是直接绑定的，则和DOM中一样是一个局部变量，可以直接访问。

<!--输出'click'-->
<button id="button" onclick="alert(event.type)">按钮1</button>
...
var btn = document.getElementById("button");
btn.attachEvent("onclick", function(event){
    alert(event.type);   // 输出'click'
});

与DOM中一样，IE中的event同样具有一些事件相关的属性，如下

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认值为false，但将其设置成true则可以取消事件冒泡（与DOM中stopPropagation()方法作用相同）
returnValue	Boolean	读/写	默认值为true，但将其设置成false则可以取消事件的默认行为（与DOM中preventDefault()方法作用相同）
srcElement	Element	只读	事件的目标（与DOM中的target属性相同）
type	String	只读	被触发的事件的类型

srcElement

上一篇博客提到，在IE的attachEvent方法类，this并不是指向当前触发事件的元素，而是全局变量window，所以在事件处理程序内部最好还是使用event.srcElement比较保险。

var btn = document.getElementById("button");
btn.onclick = function(){
    alert(window.event.srcElement === this);  //true
}
btn.attachEvent("onclick", function(){
    alert(window.event.srcElement === this);  //false
}

returnValue

returnValue作用和DOM中的preventDefault()方法类似，将其赋值为false可以阻止事件默认行为。

btn.attachEvent("onclick", function(){
    window.event.returnValue = false;
}

cancelBubble

cancelBubble作用和DOM中stopPropagation()方法类似，将其赋值为true可以阻止事件进一步冒泡。

btn.attachEvent("onclick", function(){
    window.event.cancelBubble = true;
}

编写跨浏览器的事件对象

和上篇博客中提到的事件处理程序类似，事件对象同样需要为跨浏览器进行处理，根据DOM和IE的不同实现提供统一的方法。

var EventUtil = {
    //添加事件，见上篇博客
    addHandler: function(element, type, handler){},
    //移除事件，见上篇博客
    removeHandler: function(element, type, handler){},

    //获取事件对象
    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;
        }
    }

    //阻止事件捕获或冒泡（在IE中只存在冒泡）
    stopPropagation: function(event){
        if(event.stopPropagation){
            event.propagation();
        }else{
            event.cancelBubble = true;
        }
    }
}