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中具有的属性和方法如下：

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同样具有一些事件相关的属性，如下

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;
        }
    }
}