前端面试-JS基础-事件.md

本笔记按照红宝书第13章事件的结构记录

1. 事件流

   1. 事件流描述的是从页面中接收事件的顺序

   2. 事件冒泡 event bubbling

      1. 比如点击事件，会首先在元素上发生，然后沿着DOM Tree向上传播，在每一级节点都会发生，直到document对象

   3. 事件捕获 event capturing

      1. 和事件冒泡恰恰相反，最底层的document对象先捕获到事件，再沿着DOM Tree向下传播，直到最小的那个元素

   4. #####DOM事件流

      1. “DOM 2级事件“规定的事件流包括三个阶段
         1. 事件捕获阶段（document -> html->body -> div）
         2. 处理目标阶段（发生在div中，运行一些绑定的JS代码）
         3. 事件冒泡阶段（div -> body ->html -> doc)

2. 事件处理程序（事件监听器）

   1. #####HTML事件处理程序

   2. #####DOM 0级 事件处理程序

   3. #####DOM 2级 事件处理程序

   4. #####IE事件处理程序

   5. #####跨浏览器的事件处理程序

3. 事件对象

   1. DOM中的事件对象

   2. IE中的事件对象

   3. 跨浏览器的事件对象

4. ####事件类型

   1. #####UI事件

   2. #####焦点事件

   3. #####鼠标/滚轮事件

   4. #####键盘与文本事件

   5. #####复合事件

   6. #####变动事件

   7. #####H5事件

   8. #####设备事件

   9. #####触摸与手势事件

5. ####内存性能

   1. #####事件委托

      1. 利用事件冒泡，将函数绑定在尽可能高的元素里
      2. 好处是
         1. 由于高层（如doc对象）很快就可以访问，所以只要可单机的元素呈现在页面上，就可以立即具备适当的功能
         2. 在页面中设置事件处理程序的时间更少，因为只给一个Doc添加了事件处理程序
         3. 整个页面占用的内存空间更少

   2. #####移除事件处理程序

      1. 在不需要的时候移除时间处理程序，让页面执行更快
      2. 如果知道某个元素即将被删除，那么最好手工移除时间处理程序（将函数设置为null 释放内存），避免有时候元素被删除了可是事件处理程序没有删除，这个成为 dangling event handler 空事件处理程序

6. ####模拟事件

   1. #####DOM中的事件模拟

   2. #####IE中的事件模拟

7. 小结