JavaScript event 对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是 event 对象。每一个事件，都有一个对应的 event 对象。给大家打个比喻，我们都知道飞机都有黑匣子，对吧？每次飞机出事（一个事件）后，我们都可以从黑匣子（event 对象）中获取到详细的信息。

在 JavaScript 中，我们可以通过 event 对象来获取一个事件的详细信息。

JavaScript event 对象的属性

在 JavaScript 中，event 对象包含很多属性，常用的如下表所示。

event 对象的属性
属性	说明
type	事件类型
target	触发事件的元素
key	键类型（如"ArrowUp"）

注意: 在某些旧版 JavaScript 教程中，你可能会看到使用 keyCode（返回数字，如 38）来判断按键。不过 keyCode 已经被 Web 标准标记为“已废弃（Deprecated）”，在实际开发中不再推荐使用。

示例 1：event.type

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="btn" type="button">按钮</button>
    <script>
        const oBtn = document.getElementById("btn");
        
        oBtn.addEventListener("click", function(e) {
            console.log(e.type);
        }); 
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript event.type示例

分析：

当点击按钮之后，会获取事件的类型（type），控制台输出如下：

click

几乎所有的初学者（包括当年的我）都会有一个疑问：“这个 e 是什么？为什么写个 e.type 就可以获取到事件的类型呢？”

实际上，每次调用一个事件的时候，JavaScript 都会默认给这个事件函数加上一个隐藏的参数，这个参数就是 event 对象。一般来说，event 对象是作为事件函数的第 1 个参数传入的。

其实 e 仅仅是一个变量名，它存储的是一个 event 对象。也就是说，e 可以换成其他名字，如 ev、event、a 等都可以，小伙伴们可以测试一下。

// 写法 1
oBtn.addEventListener("click", function(e) {
    console.log(e.type)
});

// 写法 2
oBtn.addEventListener("click", function(event) {
    console.log(event.type)
});

示例 2：event.target

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="container">
        <h3>绿叶网</h3>
        <p>为好教程，全力以赴</p>
    </div>
    <script>
        const oContainer = document.getElementById("container");
        
        oContainer.addEventListener("click", function(e) {
            console.log(e.target);
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript event.target 示例

分析：

当我们点击 h3 标签时，控制台输出如下：

<h3>绿叶网</h3>

当我们点击 p 标签时，控制台输出如下：

<p>为好教程，全力以赴</p>

e.target 表示获取当前触发的元素，它获取的本质上是一个 DOM 对象。

提示: 想要了解这个例子，需要搞清楚 “事件冒泡” 这个概念。这块内容比较复杂，小伙伴们可以自行搜索了解一下。

示例 3：event.key

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        span { font-weight: bold; color: red; }
    </style>
</head>
<body>
    <div>你控制的方向是：<span></span></div>
    <script>
        const oSpan = document.getElementsByTagName("span")[0];

        window.addEventListener("keydown", function (e) {
            // 获取按键的值，并统一转换为小写以兼容大小写输入
            const key = e.key.toLowerCase(); 

            if (e.key === "ArrowUp" || key === "w") {
                oSpan.textContent = "上";
            } else if (e.key === "ArrowRight" || key === "d") {
                oSpan.textContent = "右";
            } else if (e.key === "ArrowDown" || key === "s") {
                oSpan.textContent = "下";
            } else if (e.key === "ArrowLeft" || key === "a") {
                oSpan.textContent = "左";
            } else {
                oSpan.textContent = "";
            }
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript event.key示例

分析：

在游戏开发中，我们一般都是通过键盘中的 “上” 、 “下” 、 “左” 、 “右” 以及 “W” 、 “S” 、 “A” 、 “D” 键来控制人物行走的方向，这个技巧用得非常多。

在 JavaScript 中，如果我们想要获取按下的是键盘的哪个键，此时可以使用 event 对象的 key 属性来获取。

event.key 返回的是一个按键的名称（这是一个字符串），常用的按键及对应的 key 如下表所示。

常用的按键及对应的 key
按键	key
W 或 w	"W" 或 "w"
A 或 a	"A" 或 "a"
S 或 s	"S" 或 "s"
D 或 d	"D" 或 "d"
↑	"ArrowUp"
↓	"ArrowDown"
←	"ArrowLeft"
→	"ArrowRight"
Enter	"Enter"

JavaScript event 对象的方法

在 JavaScript 中，event 对象提供了 2 个非常重要的方法，如下表所示。

event 对象的方法
方法	说明
preventDefault()	阻止默认行为
stopPropagation()	阻止事件冒泡

1. event.preventDefault()

在 JavaScript 中，我们可以使用 event 对象的 preventDefault() 方法来取消指定事件的默认操作。

需要注意的是，并不是所有事件都有默认操作的。preventDefault() 方法会阻止以下事件：

a 元素的 click 事件：阻止链接跳转。
form 元素的 submit 事件：阻止表单提交并刷新页面。
鼠标右键的 contextmenu 事件（较少用）：阻止浏览器默认的右键菜单。

示例 4：event.preventDefault() 阻止链接跳转

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="https://www.lvyenet.com">绿叶网</a>
    <script>
        const oLink = document.getElementsByTagName("a")[0];
        
        oLink.addEventListener("click", function(e) {
            e.preventDefault();
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript event.preventDefault() 示例

分析：

默认情况下，当我们点击超链接时，会跳转到指定的地址。但在这个例子中，由于我们使用 e.preventDefault() 来阻止其默认行为，此时即使点击超链接，也不会跳转。

2. event.stopPropagation()

在 JavaScript 中，我们可以使用 event 对象的 stopPropagation() 方法来阻止事件从当前元素向其父元素继续传播（即阻止事件冒泡）。

示例 5：event.stopPropagation() 阻止事件冒泡

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="parent">
        <button id="child">按钮</button>
    </div>
    <script>
        const oParent = document.getElementById("parent");
        const oChild = document.getElementById("child");

        oParent.addEventListener("click", function() {
            console.log("父元素被点击了！");
        });

        oChild.addEventListener("click", function(e) {
            console.log("子元素被点击了！");
            // 阻止事件继续向上传播到父元素
            e.stopPropagation();
        });
    </script>
</body>
</html>

页面效果如下图 1 所示，浏览器控制台输出如下图 2 所示。

JavaScript event.stopPropagation() 输出效果

分析：

如果我们把 e.stopPropagation(); 这一句代码去掉，然后再次点击按钮，此时控制台输出如下图所示。

JavaScript 去除 event.stopPropagation() 的效果