Javascript高级编程学习笔记（59）—— 事件（3）事件对象

事件对象

在触发DOM‘事件时，会产生一个事件对象 event

该对象包含着所有与事件有关的信息

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

 

DOM事件对象

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

如下所示：

var btn = document.getElementByTagName("button")[0];

btn.onclick = function(event){
    alert(event.type); //"click"
}

而通过HTML特性指定的事件处理程序，变量event保存着 event 对象

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

 

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

如下表所示：

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	表明事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	指向事件处理程序所处理事件的触发元素
defaultPrevent	Boolean	只读	为true表示已经调用了preventDefault（）方法
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段 1表示捕获阶段  2表示处于目标阶段 3表示冒泡阶段
preventDefault（）	Function	只读	取消事件的默认行为，当cancelable为 true 时才能使用该方法
stopImmediatePropagation（）	Function	只读	取消事件的进一步捕获或冒泡，针对同一事件的多个事件处理程序（即事件终止于当前事件处理程序不会继续，就算是同一个元素的同一个事件的不同事件处理程序也不会触发）
stopPropagation（）	Function	只读	取消事件的下一阶段的事件处理程序，但是当前阶段的不同事件处理程序都会触发
target	Element	只读	事件的目标元素
trusted	Boolean	只读	true表示事件是浏览器生成，false表示事件为JS创建
type	String	只读	事件触发的类型
view	AbstractView	只读	与事件关联的抽象视图，等同于发生事件的window对象

在事件处理程序的内部，this 始终等于 currentTarget 的值

而target只包含事件的实际目标

也就是说 this和current指向的是注册当前事件的元素，而target是当前事件的目标元素

这两者可能有一样的值，而在事件委托时我们将事件注册到目标元素的父元素上，这两者就不相同了

 

当我们需要通过一个函数处理多个事件的时候

可以使用type属性

如：

var btn = document.getElemntByTagName("button")[0]'
var handler = function(event){
    switch(event.type){
        case "click":
            alert("clicked");
            break;
        case "mouseover":
            alert("mouseover");
            break;
        case "mouseout":
            alert("out");
            break;
    }
}

btn.onclick = handle;
btn.onmouseover = handle;
btn.onmouseout = handle;

 

如果希望阻止事件的默认行为，可以使用 preventDefault（） 方法

不过只有cancelable 属性为true 的事件才能阻止默认行为

 

而关于stopImmediatePropagation（）和stopPropagation（）的区别在于，前者让事件流停止在当前事件处理程序，而后者是让事件流停在当前事件流阶段

此外，只有在事件处理程序执行期间 event 对象才会存在，一旦执行完毕 event 对象就会销毁

 

IE中的事件对象

与访问DOM中的 event 对象不同，访问IE中的 event 有几种不同的方式，而方式取决于是如何注册事件处理程序的

当我们使用DOM0级的方式添加事件处理程序的时候 event 对象作为 window  的一个属性存在

 

而如果我们使用 attachEvent 方法添加事件处理程序，那么就和DOM一样 event 对象会作为一个参数传入事件处理程序

并且也可以使用 window.event来访问

而IE中的所有事件对象都会包含以下属性和方法：

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认值为false，设置为true就可以取消冒泡
returnValue	Boolean	读/写	默认值为true，设为法拉瑟可以取消事件的默认行为
srcElement	Element	只读	事件目标与DOM中的 target 属性相同
type	String	只读	被触发事件的类型

 

 

而IE中有一点比较重要，那就是事件处理程序的this指向和事件处理程序的指定方式有关，所以在使用时最好使用 event.srcElement 比较保险

 

跨浏览器事件对象

事件对象当然也有跨浏览器的实现方式

下方给出的是一个简略的初步实现：

function eventFunction(e){
    var events;
    events = e ? e : window.event;// event对象兼容
    events.target = e.target || e.srcElement;// 目标元素兼容
    events.preventDefault = e.preventDefault || function () {
                events.returnValue = false;
     };// 阻止默认事件兼容
     events.stopPropagation = e.stopPropagation || function () {
                events.cancelBubble = true;
     };// 阻止冒泡兼容
}