JavaScript青少年简明教程：事件及处理

本文链接：https://blog.csdn.net/cnds123/article/details/140839178

JavaScript青少年简明教程：事件及处理

在编程语言中，事件（Event）是一种使程序能够响应特定操作或条件发生的机制。它允许程序中的不同部分（比如对象、类或模块）在发生某些特定情况时互相通信或协作。事件驱动编程（Event-driven programming）是一种基于事件的编程范式，它依赖于事件和回调函数（或监听器）来处理或响应这些事件。

事件的基本组成部分

事件源（Event Source）：产生事件的实体或对象。例如，在网页上，一个按钮点击事件的事件源就是该按钮。
事件（Event）：具体发生的情况或动作，通常包含有关该动作的一些信息（如发生的时间、位置等）。在事件处理中，事件本身通常被封装成一个对象，这个对象包含了事件的详细信息。
事件处理器（Event Handler）：是当事件发生时被调用的函数或方法。它定义了当事件发生时应该执行的动作。

网页上发生的事情或用户行为，如点击按钮、输入文本、移动鼠标等都是事件。JavaScript能够监听这些事件并根据事件执行相应的代码，从而使网页能够对用户操作作出反应。

常见的JavaScript事件类型

鼠标事件：如click（点击）、dblclick（双击）、mouseover（鼠标悬停）、mouseout（鼠标移出）、mousedown（鼠标按下）、mouseup（鼠标松开）等。
键盘事件：如keydown（键盘按键按下）、keyup（键盘按键释放）、keypress（字符键被按下）。
表单事件：如submit（表单提交）、change（表单字段变化）、focus（获得焦点）、blur（失去焦点）。
窗口事件：如load（页面加载完成）、resize（窗口大小改变）、scroll（滚动窗口）。
触摸事件：针对移动设备，如touchstart、touchmove、touchend、touchcancel。

事件处理方式

JavaScript处理事件的方式主要有两种：通过HTML属性添加事件处理程序和使用JavaScript添加事件监听器。

1) HTML属性：在HTML元素中直接使用事件属性添加事件处理代码，如：

这种方法简单直接，它使HTML和JavaScript的代码耦合度增高，不易于维护。

2) JavaScript事件监听器（Event Listener）：使用addEventListener方法可以在JavaScript代码中添加事件处理程序，这样可以将行为（JavaScript）与结构（HTML）分离，提高代码的可维护性。示例：

document.getElementById("myButton").addEventListener("click", function() { alert("Hello World"); });

这种方法更加灵活，允许为一个事件添加多个监听器，且可以更容易地控制监听器的移除。

事件传播

事件在DOM中的传播有两个阶段：捕获阶段和冒泡阶段。

捕获阶段：事件从文档根节点沿DOM树向下传递到事件目标的过程。
冒泡阶段：事件从事件目标沿DOM树向上回传到文档根节点的过程。

默认情况下，事件处理程序只在冒泡阶段执行，但可以通过addEventListener的第三个参数设置为true，使处理程序在捕获阶段执行。

事件监听器

事件监听器（Event Listener）是 JavaScript 中处理用户交互和异步操作的重要机制。它们允许开发者响应用户的操作（如点击、输入、鼠标移动等）以及其他异步事件（如网络请求、定时器等）。事件监听器是实现动态和互动 Web 应用程序的关键工具。

addEventListener 方法是 JavaScript 中最常用的事件绑定方式。它允许你将事件监听器附加到 DOM 元素上，并指定事件类型和回调函数。语法：

元素对象.addEventListener('事件类型'，要执行的函数)

事件监听器三要素：

事件目标(Event Target)：哪个DOM元素对象触发了事件。

事件类型(Event Type)：触发事件的方式，也称为触发事件的事件名称，比如鼠标单击click、鼠标经过mouseover等。

事件处理函数(Event Handler)：实现要做什么事情的函数。这个函数包含了事件发生时要执行的操作。

注意：事件类型要加引号，函数是点击之后再去执行，每次点击都会执行一次。

例如，响应用户的点击按钮操作：

<button id="myButton">Click Me!</button>
<script>
    // 首先，定义事件处理函数
    function handleClick() {
        alert('按钮被点击');
    }

    // 为按钮添加事件监听器
document.getElementById("myButton").addEventListener("click", function);
</script>

移除事件监听器

当不再需要监听某个事件时，应当移除对应的事件监听器，以避免可能的内存泄漏和性能问题。

可以使用removeEventListener方法将其移除。

这个方法需要与addEventListener使用相同的参数，包括事件类型、事件处理函数和用于指定事件是否在捕获阶段触发的选项（可选）。

// 当需要移除事件监听器时

document.getElementById("myButton").removeEventListener('click', function);

注意事项

1.确保函数相同：removeEventListener需要引用相同的函数。如果你在addEventListener时使用了匿名函数，那么你需要保持这个函数的引用，以便后终使用removeEventListener。如果直接传递一个新的函数或匿名函数，将无法正确移除监听器。

2.捕获与冒泡：如果在添加事件监听器时指定了事件处理程序在捕获阶段执行（即第三个参数为true），则在移除时也需要指定相同的参数。

3.重复移除：多次调用removeEventListener对同一个监听器没有副作用，但只有第一次调用会实际移除监听器。

例、这个例子展示了几种不同的事件处理方式：

使用HTML属性直接绑定事件（如onclick, onmouseover）

使用JavaScript的addEventListener方法添加事件监听器

源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML事件处理示例</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; }
        .example { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; }
        #hoverDiv { background-color: lightblue; padding: 10px; }
    </style>
</head>
<body>
    <h2>HTML事件处理示例</h2>

    <div class="example">
        <h3>1. 点击事件 (onclick)</h3>
        <button onclick="showMessage()">点击我</button>
    </div>

    <div class="example">
        <h3>2. 鼠标悬停事件 (onmouseover/onmouseout)，请留意颜色变化</h3>
        <div id="hoverDiv" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='lightblue'">
            将鼠标悬停在此处
        </div>
    </div>

    <div class="example">
        <h3>3. 键盘事件 (onkeyup)</h3>
        <input type="text" id="keyInput" onkeyup="document.getElementById('keyOutput').textContent = this.value">
        <p>你输入的是: <span id="keyOutput"></span></p>
    </div>

    <div class="example">
        <h3>4. 表单提交事件 (onsubmit)</h3>
        <form onsubmit="event.preventDefault(); alert('表单已提交');">
            <input type="text" placeholder="输入些什么...">
            <button type="submit">提交</button>
        </form>
    </div>


    <script>
        function showMessage() {  
            alert('按钮被点击了——使用onclick属性响应!');  
        }         
 
        // 使用 addEventListener 添加点击事件监听器
        document.querySelector('button').addEventListener('click', function() {
            alert('按钮被点击了——使用 addEventListener方式响应!');
        });

    </script>
</body>
</html>

这个示例包含了几个常见的事件处理：

1)点击事件 (onclick):

使用内联的onclick属性和addEventListener方法两种方式演示。

2)鼠标悬停事件 (onmouseover/onmouseout):

当鼠标悬停在div上时改变背景颜色。

3)键盘事件 (onkeyup):

在输入框中输入文字时,实时显示输入的内容。

4)表单提交事件 (onsubmit):

阻止表单的默认提交行为,而是显示一个提交成功的提示。

进一步学习，可参考：

JS的事件介绍 https://blog.csdn.net/cnds123/article/details/127103830

JS捕获页面按键事件 https://blog.csdn.net/cnds123/article/details/122136978