跳到主要内容

事件

在计算机科学中，事件（Event）是指程序或系统中发生的某种事物或动作，通常会触发相应的处理过程或响应机制。事件可以是用户的操作（如点击、滚动、键盘输入等），也可以是系统内部的状态改变（如定时器到期、网络请求完成等）。事件在编程中被广泛应用，用于实现交互、响应用户输入、处理异步操作等。

事件模型​

是一种用于处理事件的机制，它定义了事件的产生、传递和处理过程。常见的事件模型有以下几种：

  1. 事件驱动模型：在事件驱动模型中，程序会监听特定的事件，并在事件发生时执行相应的处理函数。事件驱动模型通常是异步的，即事件的发生和处理是独立于主程序流程的。

  2. 发布-订阅模型：发布-订阅模型是一种广义的事件模型，它通过发布者（发布事件的对象）和订阅者（监听事件的对象）之间的消息传递来实现事件的通知和处理。当发布者触发事件时，所有订阅者都会收到通知，并执行相应的处理。

  3. 回调函数模型：回调函数模型是一种常见的事件模型，它通过将处理函数作为参数传递给触发事件的函数，来实现事件的处理。当事件发生时，触发函数会调用相应的回调函数。

  4. 观察者模式：观察者模式是一种更加通用的事件模型，它定义了观察者和主题（或被观察者）之间的关系。当主题发生变化时，它会通知所有的观察者，并执行相应的更新操作。

不同的编程语言和框架都有自己的事件模型实现方式，但无论采用何种模型，事件机制都是现代计算机程序设计中不可或缺的一部分，它使得程序可以根据外部的输入或内部的状态改变做出相应的响应和处理。

现代浏览器一共有三种事件模型​

  1. DOM0 级事件模型：也称为原始事件模型。在 DOM0 级事件模型中，可以直接将事件处理函数赋值给元素的事件属性，例如 onclick、onmouseover 等。这种模型只支持单个事件处理函数，当多次赋值时，后面的赋值会覆盖前面的。

示例：

<button onclick="handleClick()">Click me</button>
function handleClick() {
  console.log('Button clicked!');
}
  1. DOM2 级事件模型：DOM2 级事件模型引入了 addEventListener 方法，使得可以为一个元素添加多个事件监听器，并且不会覆盖之前的监听器。addEventListener 方法接收三个参数：事件类型、事件处理函数、是否在捕获阶段捕获事件（可选，默认为 false）。

示例：

<button id="myButton">Click me</button>
document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});
  1. DOM3 级事件模型：DOM3 级事件模型对 DOM2 级事件模型进行了扩展，引入了更多的事件类型和方法。其中最显著的改进是引入了 event.stopPropagation() 和 event.preventDefault() 方法，分别用于阻止事件冒泡和取消事件的默认行为。

示例：

document.getElementById('myButton').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  event.preventDefault(); // 取消事件的默认行为
  console.log('Button clicked!');
});

这三种事件模型在浏览器中共存，但通常建议使用 DOM2 级事件模型，因为它更灵活，支持添加多个事件监听器，且不会覆盖之前的监听器。同时，DOM3 级事件模型中引入的方法可以更方便地处理事件的传播和默认行为。

IE事件模型，自行了解。