编程笔记 html5&css&js 089 JavaScript 事件处理-CSDN博客

本文链接：https://blog.csdn.net/qq_40071585/article/details/136300504

编程笔记 html5&css&js 089 JavaScript 事件处理

一、事件驱动程序设计
二、Javascript中的事件
三、应用示例
小结

在JavaScript中，事件处理是构建丰富、响应性强且高效的应用程序的基础。它让开发者能够编写出与用户密切互动，并根据用户行为进行相应改变的高质量Web应用。

一、事件驱动程序设计

事件驱动程序设计（Event-driven programming，简称EDP）是一种计算机编程范式，在这种范式中，程序的执行流程不是按照预定的顺序或者循环来控制，而是由外部事件的发生来决定。这些事件可以是用户操作，如鼠标点击、键盘输入、窗口重绘，也可以是系统级别的事件，如网络数据到达、硬件中断、计时器触发等。

在事件驱动的程序中，程序通常会有一个主循环或称为事件循环，它不断地检查是否有新的事件发生。当检测到一个事件时，程序会调用相应的处理函数（事件处理器或回调函数）来响应这个事件。每个事件处理器负责处理特定类型的事件，并更新应用程序的状态或执行其他必要的逻辑。

这种设计模型广泛应用于图形用户界面（GUI）应用程序、Web应用、实时系统以及分布式系统等领域，因为它能够有效地处理并发和异步操作，增强系统的响应能力和可扩展性。

例如，在JavaScript中开发Web页面时，程序员会为按钮添加“点击”事件监听器，当用户点击该按钮时，就会触发对应的事件处理函数；在Java Swing或AWT框架中，窗口组件同样通过事件-监听器机制来响应用户的交互行为。

二、Javascript中的事件

在JavaScript中，事件是用户与网页交互时发生的特定动作或状态改变。常见的JavaScript事件包括但不限于：

页面加载/卸载事件：
- load：当整个页面（包括所有资源）完全加载后触发。
- unload / beforeunload：页面即将卸载或者离开当前页面前触发。
焦点事件：
- focus：元素获得焦点时触发，如输入框被点击激活。
- blur：元素失去焦点时触发。
鼠标事件：
- click：鼠标单击元素时触发。
- dblclick：鼠标双击元素时触发。
- mousedown、mouseup：按下和释放鼠标按钮时触发。
- mousemove：鼠标在元素上移动时持续触发。
- mouseover / mouseout：鼠标进入或离开元素时触发。
- mouseenter / mouseleave：类似上面的事件，但不冒泡。
键盘事件：
- keydown：键盘键被按下时触发。
- keyup：键盘键被释放时触发。
- keypress：字符键被按下并产生可打印字符时触发（在某些现代浏览器中已弃用）。
表单事件：
- submit：表单提交时触发。
- reset：表单重置时触发。
- input：当表单字段内容发生改变时触发（实时更新）。
- change：表单字段值在失去焦点且内容发生变化时触发。
其他事件：
- scroll：滚动条位置变化时触发。
- contextmenu：右键菜单显示时触发。
- touchstart, touchmove, touchend, touchcancel：触摸屏设备上的触摸事件。
- resize：窗口大小改变时触发。

如何调用事件处理函数：

在JavaScript中，可以通过HTML属性或DOM API来绑定事件处理器：

HTML内联方式：

<button onclick="handleClick(event)">点击我</button>

这里handleClick是事件处理函数的名字，event参数会被自动传递给该函数。

DOM属性赋值方式：

var button = document.querySelector('button');
button.onclick = function(event) {
  // 处理点击事件的代码
};

addEventListener方法：

document.getElementById('myButton').addEventListener('click', handleClick, false);

使用addEventListener可以为同一个元素添加多个事件监听器，第三个参数是可选的，用于指定事件是否在捕获阶段还是冒泡阶段执行，默认为false，即在冒泡阶段执行。

事件对象：

每当一个事件被触发时，JavaScript会创建一个包含关于这个事件信息的对象，并将它作为参数传递给事件处理函数。这个事件对象通常称为event，通过它可以访问到许多与事件相关的信息，例如：

event.target：触发事件的元素。
event.type：事件的类型，如"click"。
event.clientX 和 event.clientY：对于鼠标事件，提供鼠标相对于视口的位置。
对于键盘事件，可通过 event.keyCode 或 event.key 获取按下的键码或字符。
还有其他很多属性和方法，如阻止默认行为的 event.preventDefault()，阻止事件进一步传播的 event.stopPropagation() 等。

事件对象的具体属性和方法取决于事件的类型。

三、应用示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件驱动的计数器</title>
</head>
<body>

  <!-- 显示计数结果 -->
  <h1 id="counter">0</h1>

  <!-- 计数按钮 -->
  <button id="incrementBtn">+1</button>
  <button id="decrementBtn">-1</button>

  <script>
    // 获取DOM元素
    const counterDisplay = document.getElementById('counter');
    const incrementBtn = document.getElementById('incrementBtn');
    const decrementBtn = document.getElementById('decrementBtn');

    // 初始化计数值
    let count = 0;

    // 定义增加计数的事件处理器
    function handleIncrement(event) {
      count++;
      counterDisplay.textContent = count;
    }

    // 定义减少计数的事件处理器
    function handleDecrement(event) {
      if (count > 0) {
        count--;
        counterDisplay.textContent = count;
      }
    }

    // 为按钮添加点击事件监听器
    incrementBtn.addEventListener('click', handleIncrement);
    decrementBtn.addEventListener('click', handleDecrement);
  </script>

</body>
</html>

在这个示例中，我们创建了一个简单的计数器应用，当用户点击“+1”或“-1”按钮时，对应的事件处理器会被调用，从而更新页面上显示的计数值。这个例子充分体现了事件驱动编程在构建交互式Web应用程序中的作用和价值。

小结

JavaScript中的事件处理对于创建交互式和动态的Web应用程序至关重要，其重要性体现在以下几个方面：

用户交互：事件处理允许网页响应用户的操作，如点击按钮、填写表单、拖拽元素等。没有事件处理机制，Web应用将无法感知或响应用户的任何行为，导致用户体验极其有限。
动态更新：通过监听特定的事件（如窗口大小变化或滚动事件），可以实现实时更新页面内容或布局，提供更好的视觉体验和适配不同设备的能力。
异步编程：事件驱动模型是实现异步编程的关键方式之一。例如，AJAX请求完成后触发load或error事件，使得开发者能够在数据加载完毕后执行相应的回调函数，而无需阻塞主线程等待数据返回。
增强可维护性和扩展性：事件处理器可以在不修改原有代码的基础上添加新的功能或行为。比如，我们可以为一个按钮添加多个事件处理器来应对不同的场景，从而提高代码的复用性和灵活性。
实时通信：在现代Web开发中，WebSocket、Server-Sent Events（SSE）等技术依赖于事件处理来接收服务器推送的消息并及时更新用户界面。