前言
最近看了react源码中事件注册、事件收集、事件派发关于合成事件这部分的实现，对原生的事件机制及react的合成事件也有了一部分新的认识。所以才有了标题，e.stopPropagation真正的作用是什么？
1. js中的事件处理机制
我们知道，在js中事件的触发分为3个阶段：事件捕获、处于事件目标、事件冒泡3个阶段。
在网上经常看到一些文章说，stopPropagation用于阻止事件冒泡，而我自己对于stopPropagation的认识也一直停留在只阻止冒泡这一层面。看个dmeo
2. stopPropagation停止事件的传播
看下面的demo,父元素div绑定了捕获阶段的click事件并调用了stopPropagation
<body>
<div id="root">
<div id="parent">
<p>这是简单实现dispatch机制的demo,便于理解</p>
<button id="child">click</button>
</div>
</div>
</body>
<script>
const root = document.getElementById('root')
const parent = document.getElementById('parent')
const child = document.getElementById('child')
parent.addEventListener('click', (e) => {
e.stopPropagation()
console.log('父-原生-捕获')
}, true)
parent.addEventListener('click', () => console.log('父-原生-冒泡'), false)
child.addEventListener('click', () => console.log('子-原生-捕获'), true)
child.addEventListener('click', () => console.log('子-原生-冒泡'), false)
child.onclick = function(){
console.log('111111')
}
</script>
上面的打印结果：
从上面的执行结果，我们知道，stopPropagation方法也可以用来阻止捕获阶段事件向下的传播。
于是接着查看了MDN官方的定义：
3. 结尾
以此做个分享总结吧，分享给和我一样对stopPropagation理解有误的前端伙伴们，加油，前端伙伴！
