Event（事件）是指在HTML文档中发生的交互性质的动作，例如单击某个元素、按下键盘上的某个键以及页面的滚动等。在JavaScript中，Event被认为是一种用户活动，它可以被捕获，处理和响应。

JavaScript Event事件学习第一章 Event介绍

什么是Event？

Event（事件）是指在HTML文档中发生的交互性质的动作，例如单击某个元素、按下键盘上的某个键以及页面的滚动等。在JavaScript中，Event被认为是一种用户活动，它可以被捕获，处理和响应。

Event包含哪些信息？

当Event发生时，会携带一个Event对象，其中包含了相关信息，包括：

事件类型（Event Type）：如click，keydown等
事件的目标（Event Target）：被触发的元素
时间戳（Timestamp）：事件发生的时间
事件传播（Event Bubbling）：事件从子元素向父元素传递的过程
事件捕获（Event Capturing）：事件从父元素向子元素传递的过程

如何使用Event？

要使用Event，需要创建一个事件监听器（Event Listener），用于监测事件的发生。一个事件监听器包含两个部分：事件的类型和事件的处理函数（也称为回调函数）。

例如，下面是一个使用addEventListener函数添加点击事件监听器的示例：

document.getElementById("myButton").addEventListener("click", function(){
    alert("button clicked");
});

上面的代码中，addEventListener函数将click事件添加到ID为myButton的按钮上。当用户单击该按钮时，代码中定义的匿名函数将被执行，并显示一个弹出窗口提示“button clicked”。

Event示例说明

示例一：使用MouseEvent

下面的示例演示如何使用MouseEvent对象来监测鼠标事件。当用户单击页面上的某个元素时，代码会显示元素的ID和坐标位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MouseEvent Example</title>
</head>
<body>
    <div id="container">
        <div id="box">Click me</div>
    </div>
    <script>
        document.getElementById("box").addEventListener("click", function(event){
            var target=event.target;
            var x=event.clientX;
            var y=event.clientY;
            alert("target ID:"+target.id+"   X:"+x+"   Y:"+y);
        });
    </script>
</body>
</html>

上述代码中，addEventListener函数将click事件添加到ID为box的元素上。当事件发生时，使用MouseEvent对象获取目标元素的ID和鼠标的坐标位置，并将结果显示在一个弹出窗口中。

示例二：使用KeyboardEvent

下面的示例演示如何使用KeyboardEvent对象来监测键盘事件。当用户按下某个键时，代码会显示键码和键名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>KeyboardEvent Example</title>
</head>
<body>
    <div id="box">Press any key</div>
    <script>
        document.addEventListener("keydown", function(event){
            var code=event.keyCode;
            var name=event.key;
            alert("keyCode:"+code+"   keyName:"+name);
        });
    </script>
</body>
</html>

上述代码中，addEventListener函数将keydown事件添加到整个页面上。当事件发生时，使用KeyboardEvent对象获取按下键的键码和键名，并将结果显示在一个弹出窗口中。