浅谈js中的事件传播流程

java Script 事件传播流程

想要知道js中的事件传播流程，首先需要知道什么是事件，以及事件有什么作用。

事件

事件是JS与HTML之间的交互的实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件，以便事件发生时执行相应的代码。

事件流

事件流描述的是从页面中接受事件的顺序，首先来看这张图

捕获阶段

事件捕获过程：当我们点击TEXT时，首先是window->document->body->div->text.这个过程称为事件捕获，W3C浏览器的标准执行流程。

目标阶段

在目标节点上触发事件，被称为“目标阶段”

冒泡阶段

事件冒泡过程：text->div->body->document->window.这个过程称为事件冒泡。IE浏览器只支持冒泡，不支持捕获。W3C浏览器先执行捕获，后执行冒泡。

DOM事件流

“DOM2级事件”规定的事件包括三个阶段: 事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
还是以之前的点击按钮为例，在DOM事件流中，捕获阶段，”click”事件从document开始向下传递到body元素(注意，实际目标button在捕获阶段不会接收到事件)。目标阶段，button元素接收到”click”事件。最后，冒泡阶段，事件又被传播回文档。

DOM2级事件处理流程

DOM2级事件”规定了两个方法用于操作事件处理程序：addEventListener()和removeEventListener()。所有的节点都包含这两个方法，接收三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。最后的参数如果是true，表示在事件捕获阶段调用事件处理程序，如果是false，表示在事件冒泡阶段调用事件处理程序。

<div id="div" style="width: 200px;height: 200px;background: #0ff;">
			<p id="p" style="background: #f00;">单机事件</p>
		</div>

如果给这两个标签添加冒泡和捕获事件，则该一共会触发四次事件

var oP = document.getElementById("p");
			var oDiv = document.getElementById("div");
			
			oP.addEventListener("click", function(e){
				console.log("oP冒泡");
			}, false);
			oP.addEventListener("click", function(e){
				console.log("oP捕获");
			}, true);
			oDiv.addEventListener("click", function(e){
				console.log("oDiv冒泡");
			}, false);
			oDiv.addEventListener("click", function(e){
				console.log("oDiv捕获");
			}, true);

阻止事件捕获和冒泡

在浏览器中添加事件时，默认有冒泡行为，有时我们需要阻止这种行为。

1. 在创建的事件时，在事件的执行函数中添加return false

oP.onclick=function(){
	console.log("oP");
	return false;
}

2. 在创建的事件时，在事件的执行函数中添加event.stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段。

oP.onclick=function(){
	console.log("oP");
	event.stopPropagation();
}

3. IE浏览器阻止事件冒泡，在事件的执行函数中添加window.event.cancelBubble = true;

oP.onclick=function(){
	console.log("oP");
	window.event.cancelBubble = true; 
}

4. 在创建的事件时，在事件的执行函数中添加event.stopImmediatePropagation()方法

oP.onclick=function(){
	console.log("oP");
	event.stopImmediatePropagation()；
}

stopImmediatePropagation() 和 stopPropagation()的区别

后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生