JavaScript青少年简明教程：事件及处理
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)：实现要做什么事情的函数。这个函数包含了事件发生时要执行的操作。
注意：事件类型要加引号，函数是点击之后再去执行，每次点击都会执行一次。
例如，响应用户的点击按钮操作：
移除事件监听器
当不再需要监听某个事件时，应当移除对应的事件监听器，以避免可能的内存泄漏和性能问题。
可以使用removeEventListener方法将其移除。
这个方法需要与addEventListener使用相同的参数，包括事件类型、事件处理函数和用于指定事件是否在捕获阶段触发的选项（可选）。
// 当需要移除事件监听器时
document.getElementById("myButton").removeEventListener('click', function);
注意事项
1.确保函数相同：removeEventListener需要引用相同的函数。如果你在addEventListener时使用了匿名函数，那么你需要保持这个函数的引用，以便后终使用removeEventListener。如果直接传递一个新的函数或匿名函数，将无法正确移除监听器。
2.捕获与冒泡：如果在添加事件监听器时指定了事件处理程序在捕获阶段执行（即第三个参数为true），则在移除时也需要指定相同的参数。
3.重复移除：多次调用removeEventListener对同一个监听器没有副作用，但只有第一次调用会实际移除监听器。
例、这个例子展示了几种不同的事件处理方式：
使用HTML属性直接绑定事件（如onclick, onmouseover）
使用JavaScript的addEventListener方法添加事件监听器
源码如下：
HTML事件处理示例 HTML事件处理示例
1. 点击事件 (onclick)
2. 鼠标悬停事件 (onmouseover/onmouseout)，请留意颜色变化
将鼠标悬停在此处 3. 键盘事件 (onkeyup)
你输入的是:
4. 表单提交事件 (onsubmit)
这个示例包含了几个常见的事件处理：
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
JavaScript事件示例 https://blog.csdn.net/cnds123/article/details/120530675