DOM 元素可以触发多种类型的事件。以下是主要事件类别。
类别 | 例子 |
---|---|
键盘事件 | 按下或释放一个键 |
鼠标事件 | 按下或释放一个键 |
窗口事件 | 加载或关闭网页、调整大小、滚动 |
表单事件 | 更改表单字段的焦点,提交表单 |
每个事件都和一个事件对象相关联,该对象具有属性(关于时间的信息)和方法(对事件进行操作的方法)。此对象可由处理函数使用。
与事件关联的对象的许多属性取决于事件 type。有些属性总是存在的,比如事件返回类型 type 和 返回事件目标 target(DOM 元素是事件源)。
下面的代码使用此对象在控制台中显示事件类型和目标。
<html>
<head>
</head>
<body>
<button id="myButton">Click me!</button>
</body>
</html>
当用户点击按钮时,返回事件的类型和目标
// Show event type and target when the user clicks on the button
document.getElementById("myButton").addEventListener("click", e => {
console.log(`Event type: ${e.type}, target: ${e.target}`);
});
输出结果: