描述了页面接收事件的顺序。

事件冒泡

IE事件流，事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。
image.png

DOM 0 句柄写法

  1. <div id="box" style="height:100px; width:100px; border: 1px solid #000;"></div>
  2. <script type="text/javascript">
  3.   box.onclick = function(){
  4.     console.log('box');
  5.   }
  6.   document.body.onclick = function(){
  7.     console.log('body');
  8.   }
  9.   documenet.onclick = function(){
  10.     console.log('document');
  11.   }
  12.   window.onclick = function(){
  13.     console.log('window');
  14.   }
  15. /*
  16.   box
  17.   body
  18.   document
  19.   window
  20. */
  21. </script>

可以看出是由目标元素逐级冒泡，一直冒泡至 window

所有事件会一直冒泡到 window 上吗？

不是，只有现代浏览器（IE9 以上）会冒泡至 window，IE7、IE8 会有差别。

DOM 2 addEventListener写法

  1. <div id="box" style="height:100px; width:100px; border: 1px solid #000;"></div>
  2. <script type="text/javascript">
  3.   box.addEventListener('click', function(){
  4.     console.log('box');
  5.   }, false);
  6.   document.addEventListener('click', function(){
  7.     console.log('body');
  8.   }, false);
  9.   documenet.addEventListener('click', function(){
  10.     console.log('document');
  11.   }, false);
  12.   window.addEventListener('click', function(){
  13.     console.log('window');
  14.   }, false);
  15. /*
  16.   box
  17.   body
  18.   document
  19.   window
  20. */
  21. </script>

事件捕获

由Netscape Communicator团队提出另一种事件流。具体节点应该最后收到事件。
image.png

DOM2 才支持

  1. <div id="box" style="height:100px; width:100px; border: 1px solid #000;"></div>
  2. <script type="text/javascript">
  3.   box.addEventListener('click', function(){
  4.     console.log('box');
  5.   }, true);
  6.   document.addEventListener('click', function(){
  7.     console.log('body');
  8.   }, true);
  9.   documenet.addEventListener('click', function(){
  10.     console.log('document');
  11.   }, true);
  12.   window.addEventListener('click', function(){
  13.     console.log('window');
  14.   }, true);
  15. /*
  16.   window
  17.   document
  18.   body
  19.   box
  20. */
  21. </script>

DOM 事件流

DOM2 Events 规范规定事件流分为3个阶段：事件捕获 -> 到达目标 -> 事件冒泡。
事件捕获最先发生，然后实际目标元素接收事件，最后是冒泡。
image.png

没有捕获与冒泡的事件

  1. focus
  2. blur
  3. change
  4. submit
  5. reset
  6. select

    面试问题

    为什么有事件冒泡和事件捕获？

    因为当初的设计团队在考虑 页面的哪一部分会触发事件？ 这个问题时，有不同的差异。
    如图：
    当鼠标放在 圆1 上面时，鼠标是否也放 圆2 、圆3 上面呢？
    答案明显是 YES。
    在当初浏览器开发 IE4开发团队与网景开发团队，都认为：当鼠标点击在小圆时，同时也点击在大圆上面。

但是存在一个顺序的问题，这就是事件顺序：
是先点击小圆，还是后点击小圆的问题。

事件冒泡处理方式 IE 认为目标元素逐级往上冒泡的处理方式， 事件流 - 图4。
事件捕获处理方式 网景认为是先点击大圆再点击小圆，是捕获流的处理方式，事件流 - 图5。