JS事件传播流程，事件阻止

JS事件传播流程

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而，addEventListener还可以传入第三个参数，第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

1. 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

2. 目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。

3. 事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

事件流的原理图如下：
　　
　　
　　从图中我们可以知道

1、一个完整的JS事件流是从window开始，最后回到window的一个过程

2、事件流被分为三个阶段(1-5)捕获过程、(5-6)目标过程、(6-10)冒泡过程

3、在冒泡过程中6比7早触发。

取消事件默认行为、阻止事件传播

• 阻止事件冒泡，不触发父元素事件

   function stopBubble(e) { 
	    //如果提供了事件对象，则这是一个非IE浏览器 
	    if ( e && e.stopPropagation ) 
	    //因此它支持W3C的stopPropagation()方法 
	    e.stopPropagation(); 
	    else 
	    //否则，我们需要使用IE的方式来取消事件冒泡 
	    window.event.cancelBubble = true; //不是e.cancelBubble
    } 

• 阻止默认行为，不影响自定义的行为。

	//阻止浏览器的默认行为 
	function stopDefault( e ) { 
		//阻止默认浏览器动作(W3C) 
		if ( e && e.preventDefault ) 
		e.preventDefault(); 
		//IE中阻止函数器默认动作的方式 
		else 
		window.event.returnValue = false; //不是e.returnValue=false;
		return false; 
	}