JS 事件对象

• 在触发DOM上的某个事件时，会产生一个事件对象event，此对象包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
• 所有浏览器都支持event对象，但支持方式不同。
• 只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁

一、DOM中的事件对象
1.兼容DOM的浏览器会将一个event对象传入到事件处理程序中
例：无论使用什么方法（DOM0级或DOM2级），都会传入event对象

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
     alert(event.type);  //click
};
btn.addEventListener("click",function(event){
      alert(event.type);  //click
});

说明：event.type属性表示事件类型

2.HTML特性指定事件处理程序时，变量event中保存着event对象

<input type="button" value="click me" onclick="alert(event.type)">

3.event对象包含与创建它的特定事件有关的属性和方法

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

4.在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标
（1）将事件处理程序指定给目标元素：
this、currentTarget和target包含相同的值

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

说明：由于click事件的目标是按钮，因此三个值相等

（2）事件处理程序存在于元素的父节点（如document.body）：
这些值不相同

document.body.onclick = function (event) {
     alert(event.currentTarget === document.body);  //true
     alert(this === document.body);  //true
     alert(event.target === document.getElementById("myBtn"));  //true
}

说明：this和currentTarget 都等于document.body，因为事件处理程序是注册到这个元素上的。而target元素却等于按钮元素，因为它是click事件真正的目标。由于按钮上并没有注册事件处理程序，结果click事件就冒泡到了document.body。

5.通过一个函数处理多个事件时，可用type属性
例：通过检测event.type属性，让函数能确定发生了什么事件，并执行相应的操作

var btn=document.getElementById("myBtn");
var handler=function(event){
    switch (event.type){
         case "click":
             alert("clicked");
             break;
         case "mouseover":
              event.target.style.backgroundColor="red";
              break;
         case "mouseout":
              event.target.style.backgroundColor="";
              break;
     }
};
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;

6.阻止事件的默认行为
event.preventDefault()

Q：什么是默认行为？
A：网页中的元素，在操作的时候会有自己的默认行为。如：右击文本框输入区域，会弹出系统菜单；点击超链接会跳转到指定页面；点击提交按钮会提交数据。

例：阻止链接导航这一默认行为

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

7.取消事件冒泡
event.stopPropagation()
注：stopPropagation()可同时取消事件捕获和冒泡

例：直接添加到一个按钮的事件处理程序可调用event.stopPropagation()，从而避免触发注册到document.body上

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
    alert("clicked");
    event.stopPropagation();
};
document.body.onclick=function(event){
    alert("Hello world!");
}

说明：若不调用event.stopPropagation()，单击按钮就会出现两个提示框。调用后，取消了该事件冒泡到document.body上，因此单击按钮只会出现第一个提示框。

二、IE中的事件对象
1.与访问DOM中的event对象不同，访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。
用DOM0级添加事件处理程序时，event对象作为window对象的一个属性存在

例1：通过window.event取得了event对象，并检测了被触发事件的类型

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
    var event=window.event;
    alert(event.type);
}

例2：使用attachEvent()添加，就会有一个event对象作为参数被传入事件处理程序函数中

var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(event){
    alert(event.type);
});

2.IE的event对象包含与创建它的特定事件有关的属性和方法

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

3.不能认为this会始终等于事件目标
原因：事件处理程序的作用域是根据指定它的方式来确定的
解决：使用event.srcElement

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

说明：在第一个中（DOM0级），srcElement属性等于this；在第二个中，这两者的值不相等

4.阻止事件的默认行为
将returnValue的值设置为false

例：阻止链接导航这一默认行为

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

说明：与DOM不同的是，在此无法确定事件能否被取消

5.取消事件冒泡
将cancelBubble的值设置为true
注：IE不支持事件捕获，因而只能取消事件冒泡

例：直接添加到一个按钮的事件处理程序可使用event.cancelBubble=true，从而避免触发注册到document.body上
写法一：

var btn=document.getElementById("myBtn");
btn.onclick=function(){
    alert("clicked");
    window.event.cancelBubble=true;
};
document.body.onclick=function(event){
    alert("Hello world!");
};

写法二：

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
    alert("clicked");
    var event=window.event;
    event.cancelBubble=true;
};
document.body.onclick=function(event){
    alert("Hello world!");
};

结果：单击按钮后，只显示第一个提示框

三、跨浏览器的事件对象

var EventUtil = {
     addHandler: 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;
         }
     },
     removeHandler:function(element, type, handler){
         //省略的代码
     },
     stopPropagation:function(event){
         if(event.stopPropagation){
             event.stopPropagation();
         }
         else{
             event.cancelBubble=true;
         }
     }
}

使用：

• 第一个方法：getEvent，返回对event对象的引用

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
    event=EventUtil.getEvent(event);
}

• 第二个方法：getTarget，返回事件的目标

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
}

• 第三个方法： removeHandler，用于取消事件的默认行为

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

• 第四个方法： stopPropagation，用于阻止事件冒泡

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
    alert("clicked");
    event=EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
};
document.body.onclick=function(){
    alert("Hello world!");
};