云栈社区»论坛 › 技术文档「 Note & Doc 」 › JavaScript事件对象详解：从兼容性处理到常用属性方法 ...

发回帖发新帖

339 积分	0 好友	39 主题

发消息

JavaScript事件对象详解：从兼容性处理到常用属性方法

发表于 2025-12-26 10:50:53 | 查看: 34| 回复: 0

本文详细介绍了在浏览器环境中如何获取事件对象（Event Object），涵盖了早期的IE浏览器与主流浏览器的不同处理方式。通过对事件对象通用属性和方法的探讨，开发者可以掌握如何获取触发事件的元素、鼠标坐标信息，以及进行按键检测和阻止浏览器默认行为，从而更精准地控制网页交互。

1. 获取事件对象

当事件被触发时，浏览器会自动创建一个包含该事件详细信息的“事件对象”。然而，不同浏览器在提供这个对象的方式上存在差异。

IE 6/7/8 浏览器

在早期的IE浏览器（IE 6至IE 8）中，事件对象是作为全局对象 window 的一个属性（window.event）提供的。

node.onclick = function() {
    // 通过window.event访问事件对象
    var event = window.event;
};

主流浏览器（IE9及以上版本）

现代主流浏览器（包括IE9+、Chrome、Firefox等）会将事件对象作为参数，直接传递给事件处理函数。

// 方式一：通过onclick属性
node.onclick = function(evt) {
    // evt就是事件对象
};

// 方式二：通过addEventListener方法
node.addEventListener('click', function(evt) {
    // evt就是事件对象
});

HTML和JavaScript代码示例
代码展示了在HTML中定义样式，并通过JavaScript获取元素并绑定事件处理程序的基本方法。

2. 事件对象的常用属性和方法

事件对象不仅包含与特定事件（如点击、按键）相关的信息，还提供了一系列所有事件共有的通用属性和方法。深入理解这些属性和方法是掌握 JavaScript DOM事件处理的关键。

通用属性与方法一览

下图清晰地展示了事件对象的核心通用属性：

浏览器事件对象通用属性表

从上表可知，常用属性主要包括：

type: 返回事件的类型，例如 "click"。
target: 返回触发此事件的最底层元素（事件的目标节点）。
currentTarget: 返回绑定该事件监听器的元素。

实战：获取触发事件的元素

理解 target 与 currentTarget 的区别至关重要。下面通过一个示例来演示。

HTML 结构:

<button id="btn" class="btnClass">获取触发事件的元素</button>

JavaScript 代码:

var btn = document.getElementById('btn');
btn.onclick = function(event) {
    // 为了兼容旧版IE，获取事件对象
    var e = event || window.event;

    // 输出事件对象本身、触发元素及其属性
    console.log(e);
    console.log(e.target);
    console.log(e.target.id);
    console.log(e.target.className);
    console.log(e.target.innerHTML);
}

获取触发事件元素的代码示例

在浏览器中点击按钮，控制台输出结果如下：

控制台输出结果

可以看到，e.target 直接指向了被点击的 <button> 元素本身，通过它可以轻松访问到该元素的 id、className 等属性。

事件流中的 target 与 currentTarget

在事件冒泡或捕获阶段，target 和 currentTarget 可能指向不同的元素，这有助于我们理解事件传播机制。

示例代码与结构：

<style>
    span { background-color: pink; }
    p { width: 100px; height: 100px; background-color: yellow; }
    div { width: 200px; height: 200px; background-color: green; }
</style>

<div>
    <p>
        <span>span最里层的标签</span>
    </p>
</div>

<script>
    var span = document.querySelector('span');
    var p = document.querySelector('p');
    var div = document.querySelector('div');

    span.addEventListener('click', function(event) {
        var e = event || window.event;
        console.log('span tag');
        console.log(e.type);
        console.log(e.target);
        console.log(e.currentTarget);
    }, false);

    p.addEventListener('click', function(event) {
        var e = event || window.event;
        console.log('p tag');
        console.log(e.type);
        console.log(e.target);
        console.log(e.currentTarget);
    }, false);

    div.addEventListener('click', function(event) {
        var e = event || window.event;
        console.log('div tag');
        console.log(e.type);
        console.log(e.target);
        console.log(e.currentTarget);
    }, false);
</script>

事件冒泡示例代码