JavaScript学习总结5--事件对象

当我们触发了DOM上的某个事件（onclick，onmouseover等）时，会自动产生一个事件对象event，这个对象中包含着所有与事件有关的信息，包括触发事件的DOM元素，事件类型以及其他与特定事件相关的信息

所有浏览器都支持event对象，但方式有所不同

1.DOM中的事件对象

兼容DOM的浏览器会将event对象传入到事件处理程序中

例如：

//省略之前代码
oBtn.addEventListener('click',function(event){
    console.log(event.type);          //click 
},false)

这个例子中的事件处理程序会在控制台输出事件的类型（event.type），这个属性则包含被处罚的事件类型

根据事件的类型，不同的事件会有不同的属性和方法，不过所有事件都会有以下属性或方法

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

事件处理程序的内部，对象this始终等于currentTarget的值，而target只包含事件的实际目标（currentTarget为实际触发事件的元素，target为绑定事件的元素）

//省略之前代码
oBtn.onclick=function(event){
    console.log(event.currentTarget===this);    //true
    console.log(event.target===this);              //true
}