红宝书阅读笔记

事件

事件实现了JS与HTML之间的交互。

事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器（也叫处理程序）订阅事件。在传统软件工程领域，这个模型叫“观察者模式”，其能够做到页面行为（在 JavaScript 中定义）与页面展示（在 HTML 和 CSS 中定义）的分离。

事件流

事件流描述了页面接收事件的顺序。

事件冒泡（IE事件）

从最具体的元素开始出发，向上传播至没有那么具体的元素，即从内向外，一直到document对象。

事件捕获（网景事件）

从最不具体的元素传播到最具体的元素，即从外向内，从document开始。

DOM事件流

DOM2 Events 规范规定事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。

事件捕获最先发生，
为提前拦截事件提供了可能。然后，实际的目标元素接收到事件。最后一个阶段是冒泡，最迟要在这个
阶段响应事件。

DOM事件流认为事件处理是冒泡阶段的一部分，而现代浏览器也都会在捕获阶段触发目标事件，所以可以认为在事件目标上有两个机会来处理事件。

event对象

在外部定义的事件监听器会创建一个函数来封装属性的值，这个函数的this指向当前事件的目标元素，这个函数有一个特殊的局部变量event，其中保存的是一个event对象。event对象包含了DOM触发事件时的所有相关信息，包括指定元素、事件类型等。

event对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁。

事件监听器

addEventListener()和removeEventListener()接收三个参数：事件名、事件处理函数和一个表明调用阶段的布尔值，true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。

比起传统的将事件监听器直接添加在指定元素上的方法，DOM2 Events规定的这两个方法可以为同一个事件添加多个事件处理程序。

addEventListener()添加的事件处理程序只能用removeEventListener()在传入相同的参数的条件下进行移除，所以其添加的匿名函数无法被移除。

大多数情况下，因为冒泡事件流比捕获事件流具有更强的浏览器兼容性，通常会将事件处理程序注册在事件的冒泡阶段。除非需要在事件到达指定目标前拦截事件，其他情况下不会将事件处理程序注册在事件的捕获阶段。

性能优化

事件委托

在JS中，页面的事件处理程序越多，页面性能就越差。事件委托利用事件冒泡，可以只使用一个事件处理程序来处理页面中所有的某一类型的事件。

比如，在document元素上添加click事件监听器，然后通过switch方法为不同的event执行不同的操作，这样做会比给每一个event的都注册click事件监听器的性能更好。

清理事件处理程序

无用的事件处理程序会占用Web应用的内存，在删除指定元素/页面卸载前应该先清理该元素/该页面的事件处理程序，这样可以确保内存得到回收，指定元素/页面也可以被安全清除。
btn.onclick = null; // 删除事件处理程序