事件的三个阶段：捕获阶段 目标阶段 冒泡阶段
编辑删除js有好多的知识需要不断积累，但是不能浅尝，应该深究其内因，并运用在日常开发过程中。
捕获阶段：
事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。
那么捕获阶段有什么用吗？完全可以没有捕获阶段也可以啊？
捕获阶段的主要任务是建立传播路经，在冒泡阶段根据这个路经回溯到文档根节点
目标阶段
事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发
冒泡阶段
事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点。
运用举例：
html代码
<div class="a"><li class="b"><a href="#" class="c">buhuo</a></li></div>
js代码
var div = document.getElementsByClassName('a')[0]; //注意[0]var li = document.getElementsByClassName('b')[0];var a = document.getElementsByClassName('c')[0];//第三个参数默认是false,//是对事件冒泡过程添加函数进行处理div.addEventListener('click',function(event){console.log('div');});li.addEventListener('click',function(event){console.log('li');});a.addEventListener('click',function(event){console.log('a');});//事件捕获过程处理//第三个参数设为truediv.addEventListener('click',function(event){console.log('div');},true);li.addEventListener('click',function(event){console.log('li');},true);a.addEventListener('click',function(event){console.log('a');},true);
运行结果
div
li
a
a
li
div
可知：首先是捕获阶段执行，再是冒泡阶段
运用在事件委托上
JavaScript事件代理可以把事件处理器添加到一个父元素上，这样就避免了把事件处理器添加到多个子元素上。
阻止事件冒泡
某个DOM节点绑定了某事件监听器，本来是想当该DOM节点触发事件，才会执行回调函数。结果是该节点的某后代节点触发某事件，由于事件冒泡，该DOM节点事件也会触发，执行了回调函数，这样就违背了最初的本意了。
html
<!-- 阻止事件冒泡 --><li class="aa"><a href="#" class="bb">阻止事件冒泡</a><a href="#" class="cc">cc</a></li>
js
var li1 = document.getElementsByClassName('aa')[0];li1.addEventListener('click',function(event){if(event.target.tagName.toLowerCase() === 'li'){console.log(event.target);}console.log(event.currentTarget); //监听节点})for(var i=0;i<li1.children.length;i++){li1.children[i].addEventListener('click',function(event){event.stopPropagation(); //在子元素上阻止冒泡})}
结果
点击a标签时，没有任何反应，当点击li标签时，会输出对象
注意：
无法在捕获阶段阻止事件冒泡
所以当上述代码加上true后，达不到效果
如果觉得《事件的三个阶段：捕获阶段 目标阶段 冒泡阶段》对你有帮助，请点赞、收藏，并留下你的观点哦！
