DOM事件流详解-CSDN博客

流的概念，在现今的JavaScript中随处可见。比如说React中的单向数据流，Node中的流，又或是今天本文所讲的DOM事件流。都是流的一种生动体现。

定义：
1.事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
2.事件就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。
3.事件处理程序响应某个事件的函数就叫事件处理程序(或事件侦听器)。

事件流之事件冒泡与事件捕获

事件冒泡：

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。当这个布尔值为true时，表示在捕获阶段调用事件处理程序；若果是false，表示在冒泡阶段调用事件处理程序。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#wrap {
				width: 200px;
				height: 200px;
				background: orange;
			}
			
			#outer {
				position: relative;
				top: 50px;
				left: 50px;
				width: 100px;
				height: 100px;
				background: #eeddff;
			}
			
			#inner {
				position: relative;
				top: 25px;
				left: 25px;
				width: 50px;
				height: 50px;
				background: #44ddff;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<div id="outer">
				<div id="inner"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var wrap = document.getElementById('wrap');
		var outer = document.getElementById('outer');
		var inner = document.getElementById('inner');
//		false表示冒泡，阻止冒泡
		wrap.addEventListener('click', function() {
			alert('789');
		}, false);
		outer.addEventListener('click', function() {
			alert('456');
		}, false);
		inner.addEventListener('click', function() {
			alert('123');
		}, false);
//		结论:在冒泡阶段调用事件处理程序，上面问题的结果是这样的：
//		当点击页面中心浅蓝色的部分时，先是弹出123，接着弹出456，最后弹出789。
//		因此当容器元素及其嵌套元素都在冒泡阶段调用事件处理程序时：事件按事件冒泡的顺序执行事件处理程序。
//		这意味着，当交互事件触发时，嵌套在最里层的元素最先接收到该事件，最外层的元素最后接收到该事件。

	</script>

</html>

事件捕获：老铁想想捕获是不是很简单，上代码，从外向内。

		
		wrap.addEventListener('click',function(){
		  alert('789');
		},false);
		outer.addEventListener('click',function(){
		  alert('456');
		},false);
		inner.addEventListener('click',function(){
		  alert('123');
		},false);
		wrap.addEventListener('click',function(){
		  alert('wrap');
		},true);
		outer.addEventListener('click',function(){
		  alert('outer');
		},true);
		inner.addEventListener('click',function(){
		  alert('inner');
		},true);