站在对象的角度看浏览器: 事件模型

2023-11-22 00:28:36

前言

站在计算机的角度，浏览器是一个程序，可以对网络资源进行解析，生成对应的页面，同时浏览器也是一个操作系统，拥有自己的对象模型，这个对象模型就是浏览器对象模型，英文缩写为BOM。

那么浏览器对象模型的核心是什么呢？当然就是事件模型，英文缩写为DOM。相信很多同学都听说过DOM这个概念，但是它和BOM是两个不同的东西。DOM是Document Object Model的简称，即文档对象模型，DOM模型是一棵网页结构的树，它能让JavaScript和HTML打交道，操作和动态改变网页内容、结构和样式。事件模型是一个交互模型，它是对用户和浏览器之间交互的建模，它了如何捕获、处理和响应用户在网页上的各种操作，比如鼠标点击、键盘输入、窗口大小改变等。

一、事件

事件是我们每天都会遇到的事情，在浏览器中，事件是指用户在网页上产生的操作，比如点击、鼠标移动、键盘输入等，浏览器会将这些操作转换为事件对象，并通过事件流机制来触发相应的事件处理程序。

二、事件流

事件流是指浏览器如何捕获和处理事件的过程。当一个事件发生时，浏览器会首先将其发送到事件目标，即触发事件的元素。如果该元素没有事件处理程序，浏览器会继续将其发送到父元素，依次向上直到根元素(html元素)。这个过程称为事件冒泡。

事件冒泡是一个自下而上的过程，浏览器会先检查最具体的元素，然后再检查更一般的元素。这样做的目的是为了给开发人员提供更多的灵活性，允许他们在不同的元素上注册事件处理程序，以便对事件进行不同的处理。

三、事件处理程序

事件处理程序是指当事件发生时要执行的代码。事件处理程序可以是函数、方法或内联脚本。当浏览器捕获到一个事件时，它会调用相应的事件处理程序来处理该事件。

事件处理程序可以注册在任何元素上。当浏览器捕获到一个事件时，它会从该元素开始向上查找事件处理程序。如果找到一个事件处理程序，它就会调用该事件处理程序来处理该事件。如果没有找到事件处理程序，浏览器会继续向上查找，直到找到一个事件处理程序。

四、事件目标

事件目标是指触发事件的元素。当浏览器捕获到一个事件时，它会将该事件的目标设置为触发该事件的元素。

事件目标可以通过事件对象来获取。事件对象是浏览器生成的，它包含有关事件的信息，比如事件类型、事件目标、事件发生的时间等。

五、addEventListener

addEventListener()方法用于向元素注册事件处理程序。addEventListener()方法的语法如下：

addEventListener(type, listener, options);

其中：

type：事件类型，比如"click"、"mousemove"、"keydown"等。
listener：事件处理程序，可以是函数、方法或内联脚本。
options：事件处理程序的选项，可以是布尔值或对象。

六、实践应用

如下所示为如何利用事件模型与 JavaScript 交互：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <button id="myButton">点我</button>

  <script>
    var myButton = document.getElementById('myButton');

    myButton.addEventListener('click', function() {
      alert('你点击了按钮！');
    });
  </script>
</body>
</html>