JavaScript 事件对象

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

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法，都会传入event对象。来看下面的例子：

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

这个例子中的两个事件处理程序都会弹出一个警告框，显示由event.type属性表示的事件类型。这个属性始终都会包含被触发的事件类型，例如“click”。

在通过HTML特性指定事件处理程序时，变量event中保存着event对象。请看下面的例子：

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

以这种方式提供event对象，可以让HTML特性事件处理程序与JavaScript函数执行相同的操作。

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

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。来看下面的例子：

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

这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮，一次这三个值是相等的。如果事件处理程序存在于按钮的父节点中，那么这些值是不相同的。再看下面的例子：

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

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

在需要通过一个函数处理多个事件时，可以使用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";
            bread;
        case "mouseout":
            event.target.style.backgroundColor = "";
            break;
        }
    };
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

这个例子定义了一个名为handler的函数，用于处理3种事件：click、mouseover和mouseout。当单机按钮时，会出现一个与前面例子中一样的警告框。当按钮移动到按钮上面时，背景颜色应该会变成红色，而当鼠标移出按钮范围时，背景颜色应该会恢复为默认值。这里通过检测event.type属性，让函数能够确定发生了什么事件，并执行相应的操作。

要阻止特定事件的默认行为，可以使用preventDefault()方法。例如，链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick事件处理程序可以取消它，如下面的例子所示：

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

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

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

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

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

事件对象的eventPhase属性，可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么eventPhase等于1；如果事件处理程序位于目标对象上，则eventPhase等于2；如果是在冒泡阶段调用的事件处理程序，eventPhase等于3。这里要注意的是，尽管“处于目标”发生在冒泡阶段，但eventPhase仍然一直等于2。来看下面的例子：

var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
    alert(event.eventPhase);  //2
};
document.body.addEventListener("click", function (event) {
    alert(event.eventPhase);  //1
}, true);
document.body.onclick = function (event) {
    alert(event.eventPhase);  //3
};

当单击这个例子中的按钮时，首先执行的事件处理程序是在捕获阶段触发的添加到document.body中的那一个，结果会弹出一个警告框显示表示eventPhase的1。接着，会触发在按钮上注册的事件处理程序，此时的eventPhase值为2。最后一个被触发的事件处理程序，是在冒泡阶段执行的添加到documnet.body上的那一个，显示eventPhase的值为3。而当eventPhase等于2时，this、target和currentTarget始终是相等的。

只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成后，event对象就会被销毁。

IE中的事件对象

与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。来看下面的例子：

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

在次，我们通过windwo.event取得了event对象，并检测了被触发事件的类型（IE中的type属性与DOM中的type属性是相同的）。可是，如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中，如下所示：

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

在像这样使用attachEvent()情况下，也可以通过window对象来访问event对象，就像使用DOM0级方法时一样。不过为方便起见，同一个对象也会作为参数传递。

如果是通过HTML特性指定事件处理程序，那么还可以通过一个名叫event的变量来访问event对象。再看一个例子：

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

因为事件处理程序的作用是根据指定它的方式来确定的，所以不能认为this会始终等于事件目标。故而，最好还是使用event.srcElement比较保险。例如：

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

在第一个事件处理程序中，srcElement属性等于this，但在第二个事件处理程序中，这两者的值不相同。

如前所述，returnValue属性相当于DOM中的preventDefault()方法，它们的作用都是取消给定事件的默认行为。只要returnValue设置为false，就可以阻止默认行为。来看下面的例子：

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

这个例子在onclick事件处理程序中使用returnValue达到了阻止链接默认行为的目的。与DOM不同的是，在次没有办法确定事件是否能被取消。

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

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

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

跨浏览器的事件对象

虽然DOM和IE中的event对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。IE中event对象的全部信息和方法DOM对象中都有，只不过实现方法不一样。不过，这种对应关系让实现两种事件模型之间的映射非常容易。

var EventUtil = {
    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;
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

以上代码显示，我们为EventUtil添加了4个新方法。第一个是getEvent()，它返回对event对象的引用。考虑到IE中事件对象的位置不同，可以使用这个方法来取得event对象，而不必担心指定事件处理程序的方式。在使用这个方法是，必须假设有一个事件对象传入事件处理程序中，而且把该变量传给这个方法，如下所示：

btn.onclick = function (event) {
    event = EventUtil.getEvent(event);
}

在兼容DOM的浏览器中，event变量只是简单地传入和返回。而在IE中，event参数是未定义的，一次就会返回window.event。这一行代码添加到事件处理程序的开头，就可以确保随时能够使用event对象，而不必担心用户使用的是什么浏览器。

第二个方法是getTarget()，它返回事件的目标。在这个方法内部，会检测event对象的target属性，如果存在则返回该属性的值；否则，返回srcElement属性的值。可以像下面这样使用这个方法：

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

第三个方法是preventDefault()，用于取消事件的默认行为。在传入event对象后，这个方法会检查是否存在preventDefault()方法，如果存在则调用该方法。如果preventDefault()方法不存在，则将returnValue设置为false。下面是使用这个方法的例子：

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

以上代码可以确保在所有浏览器中单击该链接都不会打开另一个页面。首先，使用EventUtil.getEvent()取得event对象，然后将其传入到EventUtil.preventDefault()以取消默认行为。

第四个方法是stopPropagation()，其实现方法类似。首先尝试使用DOM方法阻止事件流，否则就会使用cancelBubble属性。下面看一个例子：

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

在此，首先使用EventUtil.getEvent()取得了event对象，然后又将其传入到EventUtil.stopPropagation()。由于IE不支持事件捕获，因此这个方法在跨浏览器的情况下，也只能用来阻止事件冒泡。