青少年编程与数学 01-007 在网页上编写程序 14课题、事件3_2

最新推荐文章于 2024-10-01 17:17:19 发布

明月看潮生

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量926

点赞数 22

分类专栏：编程与数学第01阶段文章标签：青少年编程前端 JavaScript 编程与数学事件

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

版权

编程与数学第01阶段专栏收录该内容

271 篇文章 1 订阅

订阅专栏

青少年编程与数学 01-007 在网页上编写程序 14课题、事件3_2

三、编程与现实
- （一）相似之处
- （二）区别
四、JavaScript事件
- （一）基本概念
- （二）事件类型
五、事件处理

本文详细介绍了JavaScript中的事件处理机制，它是实现网页交互的关键技术。核心概念包括事件（用户或浏览器触发的动作）、事件源（如按钮或窗口对象）、事件处理器（响应事件的代码）。文中解释了多种事件类型，如鼠标、键盘、表单和页面/窗口事件，并探讨了事件处理的不同方法，包括内联事件处理器、事件监听器和事件委托。事件委托利用冒泡机制提高性能，而事件对象则提供事件详细信息。此外，还介绍了如何阻止默认行为和事件冒泡，以及如何移除事件监听器。

三、编程与现实

在编程中讨论的“事件”与现实世界中的“事件”有一些基本的相似之处，但也存在显著的不同。理解这些差异有助于更好地掌握编程中事件的概念。下面是两者之间的主要区别：

（一）相似之处

触发性：无论是编程中的事件还是现实世界中的事件，都是由某种触发因素引起的。例如，现实世界中，当一个球落地时，发出的声音就是一个事件；而在编程中，当用户点击一个按钮时，触发的点击事件。
响应性：事件通常需要某种形式的响应或反应。在现实生活中，当一个火灾警报响起时，人们会做出反应，如疏散；在编程中，当一个事件发生时，程序会执行相应的代码或函数来处理事件。

（二）区别

确定性与预测性：
- 现实世界：事件往往具有不可预测性，受到复杂环境因素的影响，很难精确预测事件的发生。
- 编程世界：事件的触发和响应通常是确定的，只要满足特定的条件，事件就会按照预设的方式发生和被处理。
控制与可编程性：
- 现实世界：现实中的事件可能不受个人或系统的完全控制，例如自然灾害。
- 编程世界：程序员可以设计和控制事件的触发条件和响应逻辑，使得事件及其处理高度可定制和可预测。
抽象与具体：
- 现实世界：事件通常涉及具体的物理现象或社会行为，它们是直观的并且可以直接感知。
- 编程世界：事件通常是抽象的，它们代表了软件状态的变化或用户界面的交互，这些必须通过代码和逻辑来表达和处理。
时间与空间：
- 现实世界：事件发生在连续的时间和具体的空间中，有明确的地理位置和时间点。
- 编程世界：事件可以是瞬时的，也可以是持续的，它们存在于虚拟环境中，不受物理位置的限制，仅受限于计算机系统的时钟和资源。
影响范围：
- 现实世界：事件的影响可能是广泛的，跨越多个系统和社会层面。
- 编程世界：事件的影响通常局限于软件系统内部，尽管它们可以触发网络请求或其他系统间的交互，但这种影响是程序设计者可以预见和控制的。

理解编程中事件与现实世界事件之间的这些差异，可以帮助开发者更有效地设计和实现事件驱动的软件系统。

四、JavaScript事件

JavaScript中的事件机制是实现网页交互的重要部分，它是基于事件驱动编程的原理。在网页中，事件是由用户或浏览器触发的动作，而JavaScript可以编写事件处理器来响应这些事件。

（一）基本概念

事件：事件是在文档对象模型（DOM）中发生的动作，例如用户点击按钮、滚动页面、提交表单等。
事件源：事件发生的对象，例如按钮元素<button>或窗口对象window。
事件处理器：一段JavaScript代码，当特定事件发生时会被执行。

（二）事件类型

JavaScript中有多种类型的事件，包括但不限于：

鼠标事件：如click（点击）、mouseover（鼠标移过）、mouseout（鼠标移出）等。
键盘事件：如keydown、keyup、keypress等。
表单事件：如submit（表单提交）、change（表单元素值改变）等。
页面/窗口事件：如load（页面加载完成）、resize（窗口大小改变）、scroll（页面滚动）等。

五、事件处理

在JavaScript中，事件处理是指当某个事件发生时，如何编写代码来响应这些事件。事件处理有几种不同的方式，每种方式都有其特点和适用场景。以下是几种常见的事件处理方式：

内联事件处理器
- 这是最直接的事件处理方式，在HTML标签中直接写入JavaScript代码作为事件处理器。
- 例如：<button onclick="alert('Hello, World!')">Click me</button>
- 缺点：代码混合，不便于维护，限制了代码的重用性，也不利于测试。
事件监听器
- 使用addEventListener或attachEvent（IE8及更低版本）来绑定事件处理器。
- 优点：提供了更好的灵活性和控制，可以添加多个事件处理器到同一个事件，也便于后期的修改和删除。
- 例如：
```
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('Button clicked!');
});
```
事件委托
- 事件委托利用事件冒泡的特性，将事件处理器绑定到父级元素上，而不是每个子元素上。
- 优点：减少了事件处理器的绑定次数，提高了性能，特别是在处理大量子元素时。
- 例如：
```
document.getElementById('list').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log('List item clicked!');
    }
});
```

事件对象

事件处理器通常接收一个事件对象作为参数，这个对象包含了事件的详细信息，如事件类型、目标元素、鼠标坐标等。

例如：

button.addEventListener('click', function(event) {
    console.log(event.type); // 输出 "click"
    console.log(event.target); // 输出触发事件的元素
});

阻止默认行为

使用preventDefault方法可以阻止事件的默认行为。

例如：

link.addEventListener('click', function(event) {
    event.preventDefault();
    // 自定义处理逻辑
});

阻止事件冒泡

使用stopPropagation方法可以阻止事件继续向上级元素冒泡。

例如：

element.addEventListener('click', function(event) {
    event.stopPropagation();
    // 自定义处理逻辑
});

移除事件监听器
- 使用removeEventListener方法可以移除之前添加的事件监听器。
- 例如：
```
button.removeEventListener('click', function() {
    console.log('Button clicked!');
});
```