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

本文链接：https://blog.csdn.net/cold___play/article/details/101460792

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脚本作为属性值，直接赋予给事件属性

<button onclick="alert(‘你单击了一次!’);">按钮</button>

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>