JS--JavaScript事件处理基础、事件模型、事件流（冒泡型、捕获型、混合型）、绑定事件（静态绑定和动态绑定）、事件处理函数

迈不过友情╰ 2021-08-13 19:17 549阅读 0赞

#### JavaScript事件基础 ####

JavaScript与用户之间的交互是通过事件驱动来实现的，事件驱动是面向对象程序设计的重要概念，其核心就是**以消息为基础、以事件来驱动（message based， event driven）**。当网页对象发生特定事件时，浏览器会自动生成一个事件对象（Event），事件对象通常会沿着DOM节点进行传播，知道被脚本捕获。如果为事件绑定响应程序（事件处理函数），浏览器就会调用该事件处理函数，执行其中的代码，完成预定任务。

#### 事件模式 ####

在浏览器发展历史中，出现4种事件处理模型

*  基本事件模型  
    也成为DOM 0 事件模型，是浏览器初期出现的一种比较简单的事件交互方式，主要通过事件属性，为指定标签绑定事件处理函数。由于这种交互方式应用比较广泛，获得了所有浏览器的支持，目前任然比较流行。但是这种模型对于HTML文档严重依赖，不利于JavaScript独立开发。
 *  DOM事件模型  
    由W3C制定，是目前标准的事件处理模型。所有符合标准的浏览器都支持该模型，IE怪异模式不支持。DOM事件模型包括DOM2事件模块和DOM3事件模块，DOM3事件模块为DOM2事件模块的升级版，略有完善，主要是新增了一些事情类型，以适应移动设备的开发需要，但大部分规范和用法保持一致。
 *  IE事件流  
    IE4.0 及其以上版本浏览器支持，与DOM事件模型相似，但用法不同
 *  Netscape事件模型  
    由Netscape4浏览器实现，在Netscape6中停止支持

#### 事件流 ####

事件流就是多个节点对象对同一种事件进行响应的先后顺序，主要包括3种类型。

*  **冒泡型：**  
    事件从最特定的目标向最不特定的目标（document对象）触发，也就是事件从下向上进行响应，这个传递过程被形象的称为冒泡
 *  **捕获型：**  
    事件从最不特定的目标（document对象）开始触发，然后到最特定的目标，也就是事件从上向下进行响应
 *  **混合型：**  
    W3C的DOM事件模型支持捕获型和冒泡型两种事件流，但是捕获型事件流先发生，然后才发生冒泡型事件流。两种事件流会触及DOM种的所有层级对象，从document对象开始，最后返回document对象结束。

根据事件流类型，可以把事件传播的整个过程分为3个阶段：

*  捕获阶段：事件从document对象沿着文档树向下传播到目标节点，如果目标节点的任何一个上级节点注册了相同事件，那么事件在传播过程种就会首先在最接近顶部的上级节点执行，依次向下传播。
 *  目标阶段：注册在目标节点上的事件被执行
 *  冒泡阶段：事件从目标节点向上触发，如果上级节点注册了相同的事件，将会逐级响应，依次向上传播

#### 绑定事件 ####

在基本事件模型中，JavaScript支持两种绑定方式。

**1. 静态绑定：**  
把JavaScript脚本作为属性值，直接赋予给事件属性

**2. 动态绑定：**  
使用DOM对象的事件属性进行赋值。

<button id="btn">按钮</button>
    <script>
    	var button = document.getElementById("btn");
    	button.onclick = function(){ 
    		alert('你单击了一次!');
    	}
    </script>

#### 事件处理函数 ####

事件处理函数是一类特殊的函数，主要任务是实现事件处理，为异步调用，由事件触发进行响应。

事件处理函数一般没有明确的返回值，不过在特定事件中，用户可以利用事件处理函数的返回值影响程序的执行，如单击超链接时，禁止默认的跳转行为。

示例：为按钮对象绑定一个单击事件。在事件处理函数中，参数e为形参，响应事件之后，浏览器会把event对象传递给形参变量e，再把event对象作为一个实参进行传递，读取event对象包含的事件信息，在事件处理函数中输出当前源节点名称

<button id="btn">按钮</button>
    <script>
    var button = document.getElementById("btn");
    button.onclick = function(){ 
    	var e = e || window.event;
    	document.write(e.srcElement ? e.srcElement : e.target);
    }
    </script>

注意：IE事件模型和DOM事件模型对于event对象的处理方式不同：

*  IE把event对象定义为window对象的一个属性
 *  DOM事件模型把event定义为事件处理函数的默认参数