事件流 + 事件模型
一、事件流
- 事件冒泡：从下往上的传播方式 - 事件最开始由最具体的元素然后逐渐向上传播到DOM中最高层的父节点
window->document->html->body-> … - 事件捕获：与事件冒泡相反，事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件
二、事件模型
通过监听函数对事件作出反应 — 事件驱动式编程模型 - 推荐使用 addEventListener
- 现代事件模型（Event Delegation）
- 过程：事件委托是一种现代的事件处理技术，它利用事件冒泡的特性，将 事件处理程序添加到父元素上，而不是为每个子元素单独添加事件处理程序
- 绑定方法：
parentElement.addEventListener('click', handleClick);
-
DOM2 级事件模型【W3C标准模型】
- 过程（3个）：捕获 + 处理 + 冒泡
- 事件捕获阶段 ：事件从document一直 向下传播 到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行
- 事件处理阶段：到达目标元素，触发目标元素的监听函数
- 事件冒泡阶段：事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行
-
绑定方法：
addEventListener(eventType, handler, useCapture)/removeEventListenerbutton.addEventListener('click', handleClick)
- 过程（3个）：捕获 + 处理 + 冒泡
-
DOM0 级事件模型（原始事件模型）
- 过程：事件不会传播，即没有事件流的概念
- 绑定方法：
<button onclick="handleClick()">Click me</button>
-
IE 事件模型
- 过程（两个）：事件处理阶段 + 事件冒泡阶段
- 事件处理阶段 - 事件到达目标元素，触发目标元素的监听函数
- 事件冒泡阶段 - 事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行
- 绑定方法：
// 第一个参数：eventType - 指定事件类型(注意加on) btn.attachEvent(‘onclick’, handler); // detachEvent - 过程（两个）：事件处理阶段 + 事件冒泡阶段