事件及事件对象（二）

JavaScript事件处理函数通过event对象获取事件相关信息，根据浏览器对DOM的实现情况event对象有两种：

• DOM的事件对象

　　DOM事件对象通过向函数传递参数获取，如下：

oBtn.onclick = function(event){
    alert(event.type);
};

oBtn.addEventListener('click',function(event){
    alert(event.type);
},false);

　　执行上面的函数会弹两次‘click’，也就是事件类型。

　　DOM事件对象的方法和属性有：

1. event.type----事件类型，如‘click’‘mouseover’‘mouseout’等
2. event.preventDefault()----阻止事件的默认行为，当event.cancelable为true时才可以使用
3. event.stopPropagation()------阻止冒泡或捕获阶段触发事件，当event.bubbles为true时可用
4. event.target ---  事件发生的元素
5. event.currentTarget  ----   事件绑定的元素，如果事件发生在绑定的元素上，那么target/currentTarget/this相等；注意用attachEvent绑定事件，this指向window
6. event.eventPhase ---  事件在捕获阶段发生为1，处于目标元素上为2，在冒泡阶段发生为3

• IE的事件对象

　　IE的事件对象是window的属性，因此可以用window.event获得：

　　

oBtn.onclick = function(){
    alert(window.event.type);
};

oBtn.attachEvent('onclick',function(){
    alert(window.event.type);
});

　　执行以上代码也会弹出两次事件类型。

　　IE事件对象的属性和方法：

1. event.type -----同DOM事件对象
2. srcElement----- 同DOM事件对象的target
3. cancelBubbles ---- 为true取消冒泡，因为IE只有冒泡阶段所以这里只取消冒泡
4. retureValue  --- 为false取消事件的默认行为

　　下面继续扩展和完善EventUtil对象：

var EventUtil = {
    getEvent:function(event){
  　　　　return event||window.event;
    },
　　getTarget：function(event){
　　　　return event.target||event.srcElement;
　　},
　　preventDefault:function(event){
　　　　event.preventDefault?event.preventDefault():event.returnValue=false;
　　},
　　stopPropogation:function(event){
　　　　event.stopPropogation?event.stopPropogation():event.cancelBubble=true;
   }
};