JS event对象：记录当前事件的状态

在 JavaScript 中，event 对象由事件自动创建，记录了当前事件的状态，如事件发生的源节点、键盘按键的响应状态、鼠标指针的移动位置、鼠标按键的响应状态等信息。event 对象的属性提供了有关事件的细节，其方法可以控制事件的传播。

2 级 DOM Events 规范定义了一个标准的事件模型，它被除了 IE 怪异模式以外的所有现代浏览器所实现，而 IE 定义了专用的、不兼容的模型。简单比较两种事件模型如下：

• 在 DOM 事件模型中，event 对象被传递给事件处理函数，但是在 IE 事件事件模型中，它被存储在 window 对象的 event 属性中。
• 在 DOM 事件模型中，Event 类型的各种子接口定义了额外的属性，它们提供了与特定事件类型相关的细节；在 IE 事件模型中，只有一种类型的 event 对象，它用于所有类型的事件。

下面列出了 2 级 DOM 事件标准定义的 event 对象属性，如下图所示。注意，这些属性都是只读属性。

下面列出了 2 级 DOM 事件标准定义的 event 对象方法，如下表所示。IE 事件模型不支持这些方法。

上表是 Event 类型提供的基本属性，各个事件子模块也都定义了专用属性和方法。例如，UIEvent 提供了 view（发生事件的 window 对象）和 detail（事件的详细信息）属性；而 MouseEvent 除了拥有 Event 和 UIEvent 属性和方法外，也定义了更多实用属性。

IE 7 及其早期版本，，以及 IE 怪异模式不支持标准的 DOM 事件模型，并且 IE 的 event 对象定义了一组完全不同的属性，如下表所示：

IE 事件模型并没有为不同的事件定义继承类型，因此所有和任何事件的的类型相关的属性都在上面列表中。

为了兼容 IE 和 DOM 两种事件模型，可以使用下面表达式进行兼容。

var event = event || window.event;  //兼容不同模型的event对象

上面代码右侧是一个选择运算表达式，如果事件处理函数存在 event 实参，则使用 event 形参来传递事件信息；如果不存在 event 参数，则调用 window 对象的 event 属性来获取事件信息。把上面表达式放在事件处理函数中即可进行兼容。

在以事件驱动为核心的设计模型中，一次只能处理一个事件，由于从来不会并发两个事件，因此使用全局变量来存储事件信息是一种比较安全的方法。

示例

下面示例演示了如何禁止超链接默认的跳转行为。

<a href="https://www.baidu.com/" id="a1">禁止超链接跳转</a>
<script>
    document.getElementById("a1").onclick = function(e) {
        e = e || window.event;  //兼容事件对象
        var target = e.target || e.srcElement;  //兼容事件目标元素
        if (target.nodeName !== 'A') {  //仅针对超链接起作用
            return;
        }
        if (typeof e.preventDefault === 'function') {  //兼容DOM模型
            e.preventDefault();  //禁止默认行为
            e.cancelBubble();  //禁止事件传播
        } else {  //兼容IE类型
            e.returnValue = false;  //禁止默认行为
            e.cancelBubble = true;  //禁止冒泡
        }
    };
</script>