JavaScript 事件处理教程

JavaScript 事件处理是网页开发中非常重要的一部分。通过事件处理，我们可以让网页响应用户的操作，如点击、鼠标移动等。

基本概念

事件

事件是用户或浏览器自身执行的操作。例如，点击按钮、鼠标移动等都是事件。

事件监听器

事件监听器是一种机制，允许我们为特定元素上的特定事件指定一个函数。当事件发生时，该函数会被调用。

事件类型

JavaScript 支持多种事件类型，以下是一些常见的事件类型：

点击（Click）
双击（Dblclick）
鼠标移动（Mousemove）
鼠标按下（Mousedown）
鼠标抬起（Mouseup）
键盘按下（Keypress）
窗口大小改变（Resize）
网页加载完成（Load）

事件处理程序

事件处理程序是当事件发生时执行的一组代码。在 JavaScript 中，我们可以使用以下方法来添加事件处理程序：

// 使用 addEventListener 添加事件处理程序
element.addEventListener('click', function() {
  // 事件处理程序代码
});

// 使用 on 属性添加事件处理程序
element.on('click', function() {
  // 事件处理程序代码
});

示例

以下是一个简单的示例，演示如何为按钮添加点击事件处理程序：

<button id="myButton">点击我</button>

<script>
  var button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    alert('按钮被点击了！');
  });
</script>

扩展阅读

如果您想了解更多关于 JavaScript 事件处理的知识，可以参考以下教程：