|
1 | 1 | --- |
2 | | -title: event.type |
| 2 | +title: Event：type 属性 |
3 | 3 | slug: Web/API/Event/type |
| 4 | +l10n: |
| 5 | + sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2 |
4 | 6 | --- |
5 | 7 |
|
6 | 8 | {{APIRef("DOM")}} |
7 | 9 |
|
8 | | -只读属性 **Event.type** 会返回一个字符串，表示该事件对象的事件类型。 |
| 10 | +{{domxref("Event")}} 接口的只读属性 **`type`** 会返回一个字符串，表示该事件对象的事件类型。该名称在构造事件时设置，通常用于指代特定事件，如 `click`、`load` 或 `error`。 |
9 | 11 |
|
10 | | -传给 {{ domxref("EventTarget.addEventListener()") }} 和 {{ domxref("EventTarget.removeEventListener()") }} 方法的 event 参数的值是忽略大小写的。 |
| 12 | +## 值 |
11 | 13 |
|
12 | | -要了解所有的事件类型，请查看 [Mozilla 事件类型参考](/zh-CN/docs/Mozilla_event_reference). |
13 | | - |
14 | | -## 语法 |
15 | | - |
16 | | -```plain |
17 | | -event.type |
18 | | -``` |
| 14 | +包含 {{domxref("Event")}} 类型的字符串。 |
19 | 15 |
|
20 | 16 | ## 示例 |
21 | 17 |
|
22 | | -```html |
23 | | -<!doctype html> |
24 | | -<html lang="en"> |
25 | | - <head> |
26 | | - <meta charset="utf-8" /> |
| 18 | +此示例在你每次按下键盘上的一个键或点击鼠标按钮时输出事件类型。 |
27 | 19 |
|
28 | | - <title>Event.type Example</title> |
| 20 | +### HTML |
29 | 21 |
|
30 | | - <script> |
31 | | - var currEvent = null; |
32 | | - function getEvtType(evt) { |
33 | | - console.log("//Start------------getEvtType(evt)------------ "); |
| 22 | +```html |
| 23 | +<p>按任意键或点击鼠标获取事件类型。</p> |
| 24 | +<p id="log"></p> |
| 25 | +``` |
34 | 26 |
|
35 | | - currEvent = evt.type; |
36 | | - console.log(currEvent); |
| 27 | +### JavaScript |
37 | 28 |
|
38 | | - //document.getElementById("Etype").firstChild.nodeValue = currEvent; |
39 | | - document.getElementById("Etype").innerHTML = currEvent; |
| 29 | +```js |
| 30 | +function getEventType(event) { |
| 31 | + const log = document.getElementById("log"); |
| 32 | + log.innerText = `${event.type}\n${log.innerText}`; |
| 33 | +} |
40 | 34 |
|
41 | | - console.log("//End--------------getEvtType(evt)------------ "); |
42 | | - } |
| 35 | +// 键盘事件 |
| 36 | +document.addEventListener("keydown", getEventType, false); // 第一个 |
| 37 | +document.addEventListener("keypress", getEventType, false); // 第二个 |
| 38 | +document.addEventListener("keyup", getEventType, false); // 第三个 |
43 | 39 |
|
44 | | - //Keyboard events |
45 | | - document.addEventListener("keypress", getEvtType, false); //[second] |
| 40 | +// 鼠标事件 |
| 41 | +document.addEventListener("mousedown", getEventType, false); // 第一个 |
| 42 | +document.addEventListener("mouseup", getEventType, false); // 第二个 |
| 43 | +document.addEventListener("click", getEventType, false); // 第三个 |
| 44 | +``` |
46 | 45 |
|
47 | | - document.addEventListener("keydown", getEvtType, false); //first |
48 | | - document.addEventListener("keyup", getEvtType, false); //third |
| 46 | +### 结果 |
49 | 47 |
|
50 | | - //Mouse events |
51 | | - document.addEventListener("click", getEvtType, false); // third |
| 48 | +{{EmbedLiveSample('示例')}} |
52 | 49 |
|
53 | | - document.addEventListener("mousedown", getEvtType, false); //first |
54 | | - document.addEventListener("mouseup", getEvtType, false); //second |
55 | | - </script> |
56 | | - </head> |
| 50 | +## 规范 |
57 | 51 |
|
58 | | - <body> |
59 | | - <p>Press any key or click the mouse to get the event type.</p> |
60 | | - <p>Event type: <span id="Etype" style="color:red">-</span></p> |
61 | | - </body> |
62 | | -</html> |
63 | | -``` |
| 52 | +{{Specifications}} |
64 | 53 |
|
65 | | -### Result |
| 54 | +## 浏览器兼容性 |
66 | 55 |
|
67 | | -{{EmbedLiveSample('示例')}} |
| 56 | +{{Compat}} |
68 | 57 |
|
69 | | -## Specifications |
| 58 | +## 参见 |
70 | 59 |
|
71 | | -{{Specifications}} |
| 60 | +- {{ domxref("EventTarget.addEventListener()") }} |
| 61 | +- {{ domxref("EventTarget.removeEventListener()") }} |
0 commit comments