当我们使用 JavaScript 编写前端代码时，经常需要监听和处理各种事件。但有时候我们需要知道是哪种类型的事件触发了某个行为，以便进行进一步的处理。本文将介绍如何获取触发事件的名称（类型），并提供相应的示例代码。
事件类型
在 JavaScript 中，有多种类型的事件可以被触发。以下是一些常见的事件类型：
- click：鼠标点击事件
- keydown：按下键盘上的键
- submit：表单提交事件
- load：页面或图片加载完成事件
- error：资源加载失败事件
- mouseover：鼠标悬停事件
- ...
获取事件类型
在 JavaScript 中，我们可以使用 Event 对象来获取触发事件的相关信息，包括事件类型。Event 对象是浏览器提供的一个对象，它封装了与事件相关的所有信息，比如事件类型、目标元素、鼠标坐标等等。
要获取事件类型，我们可以使用 Event 对象的 type 属性。例如，以下是一个简单的例子，当用户点击按钮时，会弹出一个提示框，告诉我们触发的事件类型是什么：
------- ------------------- ----------- -------- ------------------------------------------------------------- --------------- - ---------- ----- ---- --- - - ------------ --- ---------
在上面的代码中，我们使用 addEventListener 方法来监听按钮的点击事件。当事件发生时，回调函数会被调用，并传入一个 Event 对象作为参数。我们可以通过访问该对象的 type 属性，获取事件类型，并将其显示在一个提示框中。
实际应用
知道如何获取事件类型后，我们可以在很多场景下使用它。以下是一些实际应用的示例：
1. 统计页面中各种类型事件的触发次数
假设你需要统计页面中某个按钮被点击的次数，或者某个表单被提交的次数等等。你可以通过监听相应的事件，并记录事件类型及触发次数，从而得出统计结果。
------- ------------------- -----------
--------
--- ----------- - ---
------------------------------------------------------------- --------------- -
--- --------- - -----------
-- ------------------------- -
---------------------- - --
-
-------------------------
------------------ --------- -------------
---
---------在上面的代码中，我们定义了一个 eventCounts 变量，用来保存每种事件类型的触发次数。在按钮点击事件的回调函数中，我们首先获取事件类型，并检查该事件类型是否已经在 eventCounts 中存在。如果不存在，就将其初始化为 0。然后，将该事件类型对应的触发次数加 1，并输出整个 eventCounts 对象到控制台。
2. 动态加载资源
有时候，我们需要在页面加载完成后，再动态地加载一些额外的资源，比如 CSS 文件、JavaScript 文件等等。我们可以通过监听 load 事件来实现这一功能。
---- ------------ ---------------------- -------- ----------------------------------------------------------- --------------- - ---------------- ----- --- ---- ---------- -- ----------- ---- ---- ----- --------- ---- --- ---------
在上面的代码中，我们使用 img 标签来加载一张占位图片。当该图片加载完成后，会触发一个 load 事件。我们可以监听该事件，并在回调函数中动态地加载其他资源。
总结
在本文中，我们介绍了如何获取触发事件的名称（类型），并提供了一些实际应用的示例。掌握了这个技巧，我们可以更加灵活地
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28194