鼠标事件（MouseEvents）

在前端开发中，事件（Event）是用户与网页交互时发生的各种行为，比如点击按钮、移动鼠标、提交表单等。JavaScript 允许开发者监听这些事件，并在事件发生时执行特定的代码。以下是一些常见的前端事件类型：

鼠标事件（MouseEvents）

• click：鼠标点击一个元素时触发。
• dblclick：鼠标双击一个元素时触发。
• mousedown：鼠标按钮被按下时触发。
• mouseup：鼠标按钮被释放时触发。
• mouseover：鼠标指针移动到一个元素上时触发。
• mouseout：鼠标指针从一个元素上移开时触发。
• mousemove：鼠标指针在一个元素上移动时触发。

键盘事件（KeyboardEvents）

• keydown：键盘上的一个键被按下时触发。
• keyup：键盘上的一个键被释放时触发。
• keypress：键盘上的一个键被按下并释放时触发。

触摸事件（TouchEvents）

• touchstart：触摸屏幕时触发。
• touchend：触摸结束时触发。
• touchmove：触摸屏幕并移动时触发。

表单事件（FormEvents）

• submit：表单被提交时触发。
• reset：表单被重置时触发。
• change：表单元素的值改变时触发。
• focus：元素获得焦点时触发。
• blur：元素失去焦点时触发。

其他事件

• load：页面或图片等资源加载完成时触发。
• unload：页面即将卸载时触发。
• resize：浏览器窗口大小改变时触发。
• scroll：滚动条滚动时触发。

如何使用事件

在JavaScript中，您可以使用 addEventListener 方法来监听事件：

// HTML: <button id="myButton">Click Me</button>

// 获取按钮元素
var button = document.getElementById('myButton');

// 监听点击事件
button.addEventListener('click', function() {
  alert('Button was clicked!');
});

事件冒泡和捕获

事件在DOM中有两种传播方式：

• 事件冒泡：事件从目标元素开始，逐级向上传播到文档的根元素。
• 事件捕获：事件从文档的根元素开始，逐级向下传播到目标元素。

您可以通过在 addEventListener 方法中设置第三个参数 useCapture 来选择事件的传播方式：

button.addEventListener('click', function(event) {
  console.log('Button was clicked!');
}, false); // false 表示使用事件冒泡，true 表示使用事件捕获

事件对象

事件处理函数中的 event 参数是一个事件对象，它包含了关于事件的详细信息，如：

• event.target：触发事件的元素。
• event.preventDefault()：阻止事件的默认行为（如阻止链接的默认导航行为）。
• event.stopPropagation()：阻止事件的进一步传播。

正确地使用事件可以让您的网页更加动态和响应用户的操作。