事件对象

事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。所有浏览器都支持event对象，但支持方式不同。

DOM中的事件对象
无论指定事件处理程序时使用什么方法(DOM0级或DOM2级)，都会传入event对象。只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完成，event对象就会被销毁。

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有的事件都会有下表列出的成员。

下面列举一些event事件中的常用属性和方法
(1)this、currentTarget、target
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。

var btn = document.getElementById('button');

btn.onclick = function(event){
    alert(event.currentTarget === this); //true
    alert(event.target === this); //true
}

上例中，由于click事件的目标是按钮，因此这三个值是相等的。如果事件处理程序存在于按钮的父节点中，那么这些值是不相同的。例如：

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

当单击上例中的按钮时，因为事件处理程序是注册到body上的，所以this和currentTarget都等于document.body。然而，target元素却等于按钮元素，因为它是click事件真正的目标。由于按钮上并没有注册事件处理程序，结果click就冒泡到了document.body，在那里事件才得到了处理。

(2)type属性
在需要通过一个函数处理多个事件时，可以使用type属性。例如：

var btn = document.getElementById('button');

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;

这个例子定义了一个handler函数，用于处理3种事件：click、mouseover和mouseout。通过检测event.type属性，让函数能够确定发生了什么事件，并执行相应的操作。

(3)eventPhase属性
事件对象的eventPhase属性可以用来确定事件当前正位于事件流的那个阶段。如果是在捕获阶段调用的事件处理程序，那么eventPhase等于1，如果事件处理程序处于目标对象上，则eventPhase等于2，如果是在冒泡阶段调用的事件处理程序，eventPhase等于3。

注意：尽管处于目标发生在冒泡阶段，但eventPhase任然一直等于2。

var btn = document.getElementById('button');

btn.onclick = function(event){
    alert(event.eventPhase);  //2
};

document.body.addEventListener('click', function(event){
    alert(event.eventPhase);   //1
}, false);

document.body.onclick = function(event){
    alert(event.eventPhase);   //3
}

(4)preventDefault()
preventDefault()方法用来阻止默认事件,例如：链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果想阻止这一行为，可以使用preventDefault()方法。

var link = document.getElementById('link');

link.onclick = function(event){
    event.preventDefault();
};

只要cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。

(5)stopPropagation()
stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步事件捕获或冒泡。例如，直接添加到一个按钮的事件处理程序可以调用stopPropagation()，从而避免触发注册在document.body上面的事件处理程序，如下面的例子：

var btn = document.getElementById('button');

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

document.body.onclick = function(event){
    alert("Body clicked");
};

上例中，如果不调用stopPrapagation()，就会在单击按钮时出现两个警告框。可是，对于click事件根本不会传播到document.body，因此，就不会触发注册在这个元素上的onclick事件处理程序。

IE中的事件对象
与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。
(1)DOM0级方法添加事件处理程序
在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。
(2)用attachEvent()添加事件处理程序
如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中。
(3)通过HTML特性指定事件处理程序
在通过HTML特性指定事件处理程序时，变量event中保存着event对象(与DOM中的事件模型相同)。

IE的event对象同样也包含于创建它的事件相关的属性和方法，这些属性和方法也会因为事件类型的不同而不同，但所有的事件对象都会包含下表所列的属性和方法。

下面列举一些event事件中的常用属性和方法
(1)srcElement属性
因为事件处理程序的作用域是根据指定他的方式来确定的，所以不能认为this会始终等于事件目标。故而，最好还是使用event.srcElement比较保险。例如：

var btn = document.getElementById('button');

btn.onclick = function(){
    alert(window.event.srcElement === this);  //true
};

btn.attachEvent('click', function(event){
    alert(event.srcElement === this);         //false
});

(2)returnValue属性
returnValue属性相当于DOM中的preventDefault()方法，他们的作用都是取消给定事件的默认行为。只要将returnValue设为false，就可以阻止默认行为。例如：

var link = document.getElementById('link');

link.onclick = function(){
    window.event.returnValue = false;
};

(3)cancelBubble属性
cancelBubble属性与DOM中的stopPropagation()方法作用相同都是用来停止事件冒泡的。由于IE不支持事件捕获，因而只能取消事件冒泡，但stopPropagation()可以同时取消事件捕获和冒泡。例如：

var btn = document.getElementById('button');

btn.onclick = function(){
    alert("click");
    window.event.cancelBubble = true;
};

document.body.onclick = function(){
    alert("Body Click");
};

通过在onclick事件处理程序中将cancelBubble设置为true，就可以阻止事件通过冒泡而触发document.body中注册的事件处理程序。结果，在单击按钮之后，只会显示一个警告框。

跨浏览器的事件对象
虽然DOM和IE中的event对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。

var EventUtil = {
    addHandler: function(element, type, handler{
        if (elment.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (elment.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + 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){
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler; 
        }
    },

    //阻止事件冒泡
    stopPropagation: function(){
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

参考资料：《JavaScript高级程序设计》（第三版）

（完）