Js事件传播流程及事件阻止

  JavaScript 与 HTML 之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。既然事件是由一些交互所产生的，那么就要了解这些事件是由页面中的哪一部分交互所产生。

事件流

  事件流描述的是从页面中接收事件的顺序。但有意思的是，IE 和 Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕获流。

• 事件冒泡

  IE提出的事件流是事件冒泡流，这种事件流传播是由内向外进行传递。即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。比如:

在上述例子中，假使你点击了其中的button标签，那么由事件冒泡所给的定义而言，其事件流的传播流程为button --> div --> body --> html --> document。即当点击了button按钮时，事件便由事件源开始一层一层向外层元素传递，直到传递到document元素上。
  此外，所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒泡会跳过元素（从直接跳到 document）。IE9、Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。

• 事件捕获

  Netscape Communicator 提出的事件流传播方式为事件捕获流，而事件捕获流则是从外向内传播。即事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。这种思想恰恰和事件冒泡几乎完全相反。
  还以上面的为例，按照事件捕获的思想，其事件传播流程为：document --> html -->body --> div --> button。在事件捕获过程中，document 对象首先接收到button上的 click 事件，然后事件沿 DOM 树依次向下（由外向内），一直传播到事件的实际目标，即事件源button元素。
  注意，虽然事件捕获是 Netscape Communicator 唯一支持的事件流模型，但 IE9、Safari、Chrome、Opera和 Firefox 目前也都支持这种事件流模型。由于老版本的浏览器不支持，因此很少有人使用事件捕获。

DOM事件流

  “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。如下：

  在 DOM 事件流中，当点击button元素后，实际的目标（元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到再到最后到

就停止了。下一个阶段是“处于目标”阶段，于是事件在

上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回document。

事件阻止

• event.stopPropagation()

• event.cancleBubble = true

  这是阻止事件冒泡的两种方法，不让事件向document上蔓延，但是默认事件任然会执行，当你对一个链接使用这两方法中的一个时，如果点击链接，这个链接仍然会被打开，但是事件冒泡却被阻止了。其兼容写法为：

  if(event.stopPropagation){
       event.stopPropagation();
  }else{
       event.cancelBubble = true;
  }

• event.preventDefault()

• event.returnValue = false

  这是阻止默认行为的两种方式，第一种是W3C提供的方法，第二种是IE提出的方法。当对一个链接使用以上两种方法之一时，链接不会被打开，但是会发生事件冒泡；

  if(event.preventDefault){
       event.preventDefault();
  }else{
       event.returnValue= false;
  }

• return false

  这个方法能够实现同时阻止默认行为和事件冒泡。即当对一个链接使用时，会使这个链接不能实现点击跳转页面，并且也不会沿dom树向上进行冒泡。