JS—事件流

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

DOM3级事件，规定了以下几类事件
＊UI事件：当用户与页面上的元素交互时发生触发。
＊焦点事件：当元素获得或失去焦点时触发。
＊鼠标事件：当使用鼠标滚轮时触发。
＊文本事件：当在文档中输入文本时触发。
＊键盘事件：当用户通过键盘在页面上执行操作时触发。
＊合成事件：当为输入法编辑器输入字符时触发。
＊变动事件：当底层dom结构发生变化时触发。
＊除去这几类事件外，HTML5也定义了一组事件，而有些浏览器还会在DOM与BOM中实现其他的专有事件。
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件，包括IE9在内的所有主流浏览器都支持DOM2级事件。IE9开始也都支持DOM3级事件。
我没有逐个版本进行测试，但是觉得IE9都支持了，其他浏览器也应该都支持吧。可能会有某个特别事件不支持，遇到，记住了就可以。

• 那些我们熟悉的事件
  onclick onmouseover onmouseout onfocus……

• 事件流
  
  
  
  
  
  
  

  
  

黄：div1，粉：div2，内红边框：body，外红边框：html

• 事件触发顺序
  当单击第一个div时，及黄色的那个。
  第一个是：我是第一个div；
  第二个是：我是第二个div；
  第三个是：我是body；
  第四个是：我是html；
  在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。
• 事件流的概念
  描述的是从页面中接收事件的顺序。
  但是早期IE与Netscope却以相反的思路解释了事件流。
• IE—冒泡
  IE的事件流叫做事件冒泡，即当一个元素（目标元素）的事件被触发后，比如说，鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发，这一过程被称为事件冒泡。这个事件从原始元素开始，一直冒泡到DOM树的最上层（document）。
  所有现代浏览器都支持事件冒泡，除了网景，大部分浏览器默认的事件流机制也是冒泡，例如上例。
• Netscope—捕获
  事件捕获的思想是目标元素的组先元素应该更早的接收到事件。而目标元素应该最后一个接收到事件。
  所以警告框的显示结果应该与上面的代码相反。
  现在IE9，还有其他浏览器也都支持这种事件流模型。

需要补充的是，html上层的祖先元素，分别是document，window。
document.onclick=function(){alert("doc")}//接html window.onclick=function(){alert('win')}//接doc
dom2级事件规范要求从doc开始，但是大部分浏览器实现从window开始。
* DOM事件流—三个阶段
事件捕获阶段，处于目标阶段，事件冒泡阶段。
虽然dom事件流，将这三个阶段分开，但是IE9即其他浏览器支持这样的实现机制：
1、捕获阶段会触发目标元素上的事件。
2、冒泡阶段会从目标元素的事件触发。

【总结】在js实现时，会根据网页的需求，有前端工程师决定是选择冒泡还是捕获。