目录

目录 事件流 事件处理程序 事件对象 事件类型 内存和性能

事件流

    即事件开始时由具体的元素（文档中嵌套层次深 的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

事件捕获

事件捕获的思想 是不太具体的节点应该更早接收到事件，而具体的节点应该后接收到事件。

DOM 事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

事件处理程序

HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定
不过，在 HTML 中指定事件处理程序有两个缺点。
首先，存在一个时差问题。因为用户可能会在 HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可
能尚不具备执行条件。
另一个缺点是，这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。

DOM0 级事件处理程序

通过 JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
如果你使用 HTML指定事件处理程序，那么 onclick 属性的值就是一个包含着 在同名 HTML特性中指定的代码的函数。
而将相应的属性设置为 null，也可以删除 以这种方式指定的事件处理程序。 

DOM2 级事件处理程序

“DOM2级事件”定义了两个方法，用于指定和删除事件处理程序：addEventListener() 和 removeEventListener()。
且它们都接受 3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。 
使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。例如为同一事件定义两个不同的函数。
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；移 除时传入的参数与添加
处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿名函数将无法移除，所以传入的第二个参数
应该是在外部声明的一个具体函数。

IE9、Firefox、Safari、Chrome和 Opera支持 DOM2级事件处理程序。

IE 事件处理程序

IE实现了与 DOM中类似的两个方法：attachEvent()和 detachEvent()。
这两个方法接受相同 的两个参数：事件处理程序名称与事件处理程序函数。
为同一个按钮添加了两个不同的事件处理程序。不过，与 DOM 方法不同的是，这些事件处理程序不是以添加它们的顺序
执行，而是以相反的顺序被触发。

事件对象

事件类型

UI 事件

 load：当页面完全加载后在 window 上面触发，当所有框架都加载完毕时在框架集上面触发， 当图像加载完毕时在

元素上面 触发。 unload：当页面完全卸载后在 window 上面触发，当所有框架都卸载后在框架集上面触发，或 者当嵌入的内容卸载完 毕后在

根据“DOM2级事件”规范，应该在 document 而非 window 上面触发 load 事 件。但是，所有浏览器都在 window 上面实现了该事件，以确保向后兼容。
 

在不属于 DOM文档的图像（包括未添加到文档的元素和 Image 对象）上 触发 load 事件时，IE8及之前版本不会生成 event 对象。IE9修复了这个问题。
 

根据“DOM2级事件”，应该在元素而非 window 对象上面触发 unload 事件。不过，所有浏览器都在 window 上实现了 unload 事件，以确保向后兼容。

焦点事件

 blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。  
 focusin：在元素获得焦点时触发。这个事件与 HTML事件 focus 等价，但它冒泡。支持这个 事件的浏览器有 
IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。 
 focusout：在元素失去焦点时触发。这个事件是 HTML事件 blur 的通用版本。支持这个事件 的浏览器有 
IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。 

鼠标与滚轮事件

9个鼠标事件，简介如下

 click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着 
 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。 
 dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。
 mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素
 上不会触发。IE、Firefox 9+和 Opera支持这个事件 
 mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且 在光标移动到后代元素
  上不会触发。IE、Firefox 9+和 Opera支持这个事件 
 mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。 
 mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另 一个元素可能位于前一
  个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
 mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触 发。不能通过键盘触发这
 个事件。 
 mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。 

鼠标事件中还有一类滚轮事件。而说是一类事件，其实就是一个 mousewheel 事件。

1 客户区坐标位置 
  鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。
2 页面坐标位置 
  通过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的 pageX 和 pageY 属性.
3 屏幕坐标位置
  鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通 过 screenX 和 
  screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息
4 修改键
  虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些
  修改键就是 Shift、Ctrl、Alt和 Meta（在 Windows键盘中是 Windows键，在苹果机中 是 Cmd 键），它们经常被
  用来修改鼠标事件的行为。DOM 为此规定了4各属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey 和 
  metaKey 。 这些属性都是布尔值，这些键被按下，值为 true ，否则为 false 。
5 相关元素
  在发生 mouseover 和 mouserout 事件时，还会涉及更多的元素。相关元素就是移入和移出的两个元素相对应互为相
  关元素。DOM 通过event 对象的 relatedTarget 属性提供相关元素的信息。这个属性只针对 mouseover和mouseout
6 鼠标按钮
  与 click 事件不同，mouseup 和 mousedown 事件在其 event 对象存在一个 button 属性，DOM 的 button 属性
  有3个可能的值：0 表示主鼠标按钮（左键），1 中间的鼠标按钮（滚轮），3 次鼠标按钮（右键）。
7 鼠标滚轮事件
  滚动触发 mousewheel 事件（鼠标滚轮事件），其对应的 event 对象还包含一个 wheelDelta 属性。向前滚动时，
  wheelDelta 是 120 的倍数，向后滚动时，wheelDelta 是 -120 的倍数。
8 触摸设备
  ios 和 Android 设备，因为没有鼠标，所以以下要知道：
   不支持 dbclick 事件。
   轻击可单击元素会触发 mousemove 事件，如此操作导致内容发生变化，将不再有其他事件发生；若屏幕没有因此变
  化，那么会以此触发 mousedown、mouseup 和click 事件。
   mousemove 事件会触发 mouseover 和 mouseout 事件。
   两个手指放在屏幕上且页面随手指移动而滚动时会触发 mousewheel 和 scroll 事件。

键盘与文本事件

有3个键盘事件，比较常见：
1 keydown 事件
2 keypress 事件（按住不放会重复触发，Esc键也会触发这个事件）
3 keyup 事件

文本框输入文本时会用到上面三个事件，文本事件只有一个：textInput 。在文本插入文本框之前会触发该事件。

变动事件

 DOMSubtreeModified：在 DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。
 DOMNodeInserted：在一个节点作为子节点插入到另一个节点中触发。
 DOMNodeRemoved：节点从其父节点被移除时触发。
 DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发，在
  DOMNodeInserted 之后出发。
 DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发，在
  DOMNodeRemoved之后出发。
 DOMAttrModified：在特性被修改之后触发。
 DOMCharacterDataModified：在文本节点的值发生变化时触发。

具体的变动事件：

1 删除节点
  removeChild（）或 replaceChild（）
2 插入节点
  appendChild（）、replaceChild（）或 insertBefore（）

HTML5 事件

1 contextmenu 事件
  本身属于鼠标事件，常用来显示自定义的上下文菜单。
2 beforeunload 事件
  为了让开发人员有可能在卸载之前阻止这一操作。
3 DOMContentLoaded 事件
  支持在页面下载的早期添加事件处理程序。
4 hashchange 事件
   在 URL 发生变化时通知开发人员，其 event 对象包含两个属性：oldURL 和 newURL 。   

内存和性能