< 浏览器原理 >

事件流 + 事件模型 + js绑定事件的几种方法

Posted by CodingWithAlice on July 1, 2021

事件流 + 事件模型 + js绑定事件的几种方法

参考文章：绑定事件、事件模型

核心要点记录：

事件流：

事件冒泡：从下往上的传播方式 - 事件最开始由最具体的元素然后逐渐向上传播到DOM中最高层的父节点 window -> document -> html -> body -> …
事件捕获：与事件冒泡相反，事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件

浏览器的事件模型就是通过监听函数对事件作出反应 — 事件驱动式编程模型

三种事件模型：

DOM0 级事件模型（原始事件模型）
- 1、事件不会传播，即没有事件流的概念
- 2、绑定方法：如下文的第1、2种方法
IE 事件模型
- 1、事件有两个过程：事件处理阶段 + 事件冒泡阶段
  - 事件处理阶段 - 事件到达目标元素, 触发目标元素的监听函数。
  - 事件冒泡阶段 - 事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行
- 2、绑定方法：IE使用 attachEvent(eventType, handler)/detachEvent
```
  // eventType指定事件类型(注意加on)；handler是事件处理函数
  btn.attachEvent(‘onclick’, showMessage);
```
DOM2 级事件模型【W3C标准模型】
- 1、事件有3个过程：事件捕获阶段 + 事件处理阶段 + 事件冒泡阶段
  - 事件捕获阶段：事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行
  - 事件处理阶段：件到达目标元素, 触发目标元素的监听函数
  - 事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行
- 2、绑定方法： addEventListener(eventType, handler, useCapture)/removeEventListener

常见面试题：给DOM元素绑定事件有哪几种方法 - 3种

第☝️种：HTML 中 on- 属性
- 1、属性值为执行的代码，而不只是函数名
- 2、只在冒泡阶段触发

<!-- 内联，事件优先级最高 -->
<body onload="doSomething()">
<div onclick="console.log('触发事件')">

第2种：元素节点的事件属性
- 1、属性值传函数名称即可
- 2、只在冒泡阶段触发

window.onload = doSomething;

var div = document.getElementsBytagname("div")[0]
div.onclick = function (event) {
  console.log('触发事件');
};

第3种：EventTarget.addEventListener()
- 1、可以给同一个元素添加1个/多个事件
- 2、默认只在冒泡阶段触发，可传参数改变

在旧版本的DOM的规定中， addEventener () 的第三个参数是一个布尔值表示是否在捕获阶段调用事件处理程序

// 第三个参数：表示是否捕获（布尔值），默认是 false，即不捕获
window.addEventListener('load', doSomething, false);

三种方法比较：

1、2两种方式都是存在一个弊端的，就是一个元素只能添加一个事件。
IE使用 attachEvent绑定；如果需要注销，应该使用detachEvent