javascript 事件

1.事件流

1.事件冒泡

事件从最具体的元素开始触发，然后向上传播。

2.事件捕获

事件从最不具体的元素开始，向下走。

实际上是为了在事件到达最终目标前拦截事件

3.DOM事件流

DOM规范规定事件流分为3个阶段：事件捕获，到达目标，事件冒泡。

事件捕获最先发生，为提前拦截提供可能。然后实际目标接收到事件，最后一个阶段是冒泡。

2.事件处理程序

1.DOM0事件处理程序：

onclick 之类的

2.DOM2事件处理程序程序：

addEventListener() ：事件名，事件处理函数，布尔值（true表示在捕获阶段调用，false默认值，表示在冒泡阶段调用

removeEventListener() ：通过addEventListener添加的事件处理程序程序只能用removeListener并传入同样的参数来移除。 所以使用addEventListener添加的匿名函数是无法移除的。

使用这种方法优势L可以为同个事件添加多个事件处理程序。会按照添加顺序执行

3.事件对象

在DOM中发生事件，所有相关信息会被储存在event对象中。

event.preventDefault() 用于阻止特定时间的默认动作。如阻止链接的href属性，表格的提交等

event.stopPropagation() 用于立即阻止事件流在DOM结构中传播，取消后续的事件捕获或者冒泡。

event.eventPhase属性 用于确定事件流当前所处的阶段。 捕获阶段eventPhase=1,事件处理在目标上调用 =2，冒泡阶段=3

4.事件类型

5.性能优化

1.事件委托：

可以防止过多事件处理程序。 原理：事件冒泡，只用一个事件处理函数来处理同一个类型的事件。

2.删除事件处理程序：无用事件处理程序，及时删除，防止占用过多内存

导致这个问题的原因：

1. 删除了带有事件处理程序的元素 。 比如通过DOM方法来removeChild() 或者replaceChild() 删除节点，或者直接通过innerHTML替换节点内容的时候，删除元素上的事件处理程序不会被垃圾清理。
2. 页面卸载。 在页面卸载后事件处理程序没有被清理，仍占内存。