js 事件

• 事件的触发过程是什么样的，什么是事件代理？

---

• 事件的作用：事件是用来实现 js 和 html 之间的交互的
• 事件流：描述的是从页面接收事件的顺序

---

事件流

• 事件冒泡：子级元素先触发，父级元素后触发

• IE 的事件流叫做事件冒泡：即事件开始时，由目标元素接受，逐级向上到 document 对象

• 事件捕获：父级元素先触发，子级元素后触发

• 事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

• DOM 事件流： “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
  1.捕获阶段
  事件由页面元素接收，从 window 发出，逐级向下直到具体的目标元素
  2.目标阶段
  事件传递到目标节点的时候触发注册的事件
  3.冒泡阶段
  事件开始时，由目标元素发出，逐级向上到页面元素

---

• W3C：任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达事件源，再从事件源向上进行事件捕获 ( 事件冒泡 )

// 标准浏览器：如果第三个参数为 true 则为事件捕获，false 则为事件冒泡
addEventListener('click', function, true)
// IE浏览器只支持事件冒泡，所以第三个参数没有了意义
element.attachEvent('click', function)
// 阻止事件冒泡
// 1. 标准浏览器
e.stopPropagation()
// 2. IE 浏览器
e.cancelBubble = true
// 阻止默认行为
// 1. W3C
e.preventDefault()
// 2. IE 浏览器
return false 

---

---

• 事件委托/代理原理：利用事件冒泡的原理实现，委托他们父级代为执行事件。

时间委托/代理的好处：节省内存，提高性能

• 为什么性能优化的主要思想之一是要减少 dom 操作
  在 js 中，添加到页面上时间程序处理数量将直接影响到页面的整体运行性能，因为要不断的与 dom 节点进行交互，访问 dom 的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间

每一个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大，以 ul li 为例，100个 li 就要占用 100 个内存空间。如果用事件委托，就会将所有的操作放到 js 程序里面只对它的父级 ul 这一个对象进行操作，与 dom 的操作就只需要进行一次，这样就能大大减少与 dom 的操作次数，提高性能，节省内存