javascript 事件流

Posted on by mannuan One min read

事件流 描述的是从页面中 接收事件的顺序 。

对待事件流的问题上，IE和Netscape提出了完全相反的两个概念：IE的事件流是 冒泡流 ，而Netscape的事件流是 捕获流。

事件冒泡

  1. IE的 事件流类型；现已被所有现代浏览器支持；
  2. 时间开始时由最具体的元素——文档中嵌套层次最具体的元素（可理解为最小的同心圆）接收，然后事件沿DOM树向上传播到document对象；
  3. 所有的现代浏览器都支持冒泡，各浏览器之间的差异

IE8- 事件冒泡到document即停止；

其他现代浏览器支持一直冒泡到window对象；

事件捕获

  1. Netscape浏览器的事件流机制；
  2. 事件开始时由不具体的节点——文档中嵌套层次最上级的元素（可理解为最大的同心圆）最早接收，然后事件沿着DOM树向下传播，直到传播到最具体的节点；
  3. 现代浏览器都支持 事件捕获 模型；
  4. DOM2级 事件规范要求：从document对象开始传播；但一般的现代浏览器都从window对象开始捕获。

DOM事件流

  1. ”DOM 2级事件“规定的事件包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段；
  2. 实例：document>html>body>div

在DOM事件流中，实际的目标(div)在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从document到html再到body后就会停止。下一个阶段就是处于”处于目标”阶段，于是事件在div上发生，并 在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播到文档。

  1. ”DOM2级事件“规定：捕获阶段不涉及事件目标；但一般的现代浏览器都会在捕获阶段触发事件对象上的事件；导致的结果就是：有两个机会（捕获、冒泡）在目标对象上面操作事件；
  2. IE8- 不支持DOM事件流。