8.1 认识事件

作者: liufeisheng

创建时间: 2024-05-09 02:43:20

基本概念

事件

事件是指在页面上与用户进行交互时发生的操作，主要包括用户动作和状态变化。

用户动作：用户对页面的鼠标或键盘操作。例如，click、keydown等。

状态变化：页面的状态发生变化。例如，load、resize、change 等。

例如，当用户单击一个超链接或按钮时就会触发单击事件；当浏览器载入一个页面时，会触发载入事件；当用户调整窗口大小的时候，会触发改变窗口大小事件。

image.png

事件处理和事件处理程序

事件处理是指对发生的事件进行处理的行为或者操作。例如，当用户单击一个超链接或按钮时就会触发单击事件，浏览器会根据用户动作进行相关的事件处理操作。 事件处理程序是指为响应用户行为或者状态变化所执行的程序。

事件驱动

事件驱动是程序的一种执行方式，也就是响应事件的发生而执行相关的事件处理程序的过程。

例如，当我们单击页面上的超链接触发单击事件时，浏览器会根据用户动作进行相关的事件处理操作，这里的事件驱动就是通过单击事件执行的。

事件驱动编程

事件驱动编程是指为需要处理的事件编写相应的事件处理程序

它包括3个步骤，触发事件、启动事件处理程序、处理程序做出反应。

事件驱动编程的一般步骤如下：

确定响应事件的元素 - 为指定元素确定需要响应的事件类型 - 为指定元素的指定事件编写相应的事件处理程序 - 将事件处理程序绑定到指定元素的事件处理程序

在事件驱动执行方式下，程序代码的执行顺序并不是按照代码的顺序从上而下地执行的，而是根据事件触发的需要来执行的。 当触发一个事件，该事件的处理程序就会被启动执行，不管这段程序代码在程序中的什么位置。 在JavaScript中，由于事件是用户交互产生的，所以其触发的顺序是无法预测的，其执行程序的路径都是不同的。

JavaScript事件大致可以分为以下4类 - 键盘事件 - 鼠标事件 - 页面事件 - 表单事件

用户在使用键盘输入时触发的事件，包括 - keydown——某个键盘按键被按下时触发的事件 - keypress——某个键盘按键被按下并松开时触发的事件 - keyup——某个键盘按键被松开时触发的事件

用户进行单击或移动鼠标操作而产生的事件，主要包括 - click——当用户点击某个对象时触发的事件 - dblclick——当用户双击某个对象时触发的事件 - mousedown——鼠标按钮被按下时触发的事件 - mouseup——鼠标按键被松开时触发的事件 - mouseover——鼠标移到某元素上触发的事件 - mousemove——鼠标被移动时触发的事件 - mouseout——鼠标从某元素移开时触发的事件

因页面状态的变化而产生的事件，主要包括 - load——一张页面或一幅图像完成加载时触发的事件 - unload——用户退出页面时触发的事件 - resize——用户改变窗口大小时触发的事件 - error——加载文档或图像时发生错误时触发的事件

表单相关的事件，是JavaScript中最常用的事件，包括 - submit——表单提交时触发的事件 - reset——表单重置时触发的事件 - change——表单元素内容改变时触发的事件 - select——文本选中时触发的事件 - focus——表单元素获得焦点时触发的事件 - blur——表单元素失去焦点时触发的事件

8.1.2 事件处理

事件处理是指为某个元素对象的事件绑定或者移除事件处理程序，使得当事件发生时就会触发该事件的事件处理程序。

在JavaScript中，事件处理有两种方式，分别为DOM 0级事件处理和DOM 2级事件处理。在介绍这两种事件处理方式之前，首先介绍两个概念：事件属性和事件流。

事件的绑定和移除是通过事件的属性进行的。在JavaScript中，事件属性名称就是“on”+“事件名称”。如click是单击事件名，onclick就是对应的事件属性名，也可以将事件属性名简称为事件名。按照事件属性名的定义，常用的事件属性如表所示。

image.png

事件流

在JavaScript中，事件流指的是DOM事件流。当一个事件发生时，不仅产生事件的元素可以响应，其他元素也可以响应。

DOM是一个树型结构，其中的HTML元素上产生一个事件时，该事件会在DOM树中元素节点和根节点之间按照特定的顺序传播，路径所经过的节点都会收到该事件，这个过程就是DOM的事件流。按照传播方向的不同，DOM事件流有两种方式：冒泡事件和捕获事件。

（1）冒泡事件

IE 采用的事件流是事件冒泡。当事件在某一元素上触发时，事件将沿着各个节点的父节点自下而上穿过各个DOM节点，就像冒泡一样，所以这种方式称冒泡事件方式。在冒泡的过程中，任何时候都可以终止事件的冒泡。如果不终止冒泡，事流会沿着DOM节点一直向上直至DOM的根节点。冒泡事件的过程如图所示。

image.png （2）捕获事件

Netscapte采用捕获事件，它与冒泡事件相反，在捕获事件中，事件的传播将从DOM树的根节点开始，而不是从触发事件的目标元素开始。事件是从目标元素的所有父元素依次向下传递。在这个过程中事件会从DOM树的根元素到事件目标元素之间各个元素处捕获。捕获事件的过程如图所示。

在W3C定义的事件模型中，事件流可以分为下面3个阶段，具体如图所示。

（1）捕获阶段：事件将沿着DOM树向下传递，经过目标节点的每一个父节点，直到目标节点。例如，若用户单击了一个超链接，则该单击事件将从Document节点转送到元素、元素以及包含该链接的

元素。目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该超链接就是目标节点。

（2）目标阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行该事件监听器。

（3）冒泡阶段：事件将沿着DOM树向上传送，再逐次访问目标元素的父节点直到Document节点。该过程中的每一步，浏览器都将检测那些不是捕获事件监听器的事件监听器并执行。

image.png

DOM 0级事件处理是JavaScript指定事件处理程序的传统方式，就是指将一个函数赋值给一个事件处理程序属性，主要分为如下两种形式。 形式一：行内绑定 这种方式通过设置HTML标签的事件属性实现，具体语法格式如下。

         <标签名 事件属性="事件处理程序">

上述语法格式中，标签名可以是任意的HTML标签名，事件属性是如表8-2所示的事件属性，事件处理程序是事件执行的程序代码，如下。

            <input id="btn" type="button" value="单击我" οnclick="alert('thanks');" >
 ```

<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b914d079362c1f062f111b7a1bed6aeb.image.webp" alt="image.png">

<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c0154385f95c7b4877e32ed694de6bf2.image.webp" alt="image.png">



         <!DOCTYPE html>
天干地支 


<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/baaca27739a0e0660f64433ddb224314.image.webp" alt="image.png">


<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1e796a0d573940929cf03c0418273ed6.image.webp" alt="image.png">

<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b1251507c336a8645703a0ebc0c69bae.image.webp" alt="image.png">


         <!DOCTYPE html>
天干地支-动态绑定 

## 2级事件处理
为了解决DOM对象的同一个事件不能同时绑定多个事件的问题，在JavaScript中定义了DOM 2级事件处理，实现同一个DOM对象的同一个事件可以绑定多个事件处理程序。
 DOM 2级事件处理使用两个方法来添加和移除事件处理程序，即addEventListener()和removeEventListener()，具体语法格式如下


<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b41c22debd634cf3eee28c4b369e6ce7.image.webp" alt="image.png">


<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5c93ec62107a2c71eb7636e48d2a03c8.image.webp" alt="image.png">

<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5ec4623e4ca3c58e0192bb477a357376.image.webp" alt="image.png">

<img src="https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b583e71088ae4bc1327c81421710885f.image.webp" alt="image.png">


         <!DOCTYPE html>
天干地支-动态绑定

``` 通过【任务实践8-3】验证说明 - 对同一个对象可以添加多个事件监听的程序，这些程序会依次执行 - 对同一个对象同时执行添加和移除事件监听的操作时，要采用有名函数的方式