一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。这种三阶段的传播模型，使得同一个事件会在多个节点上触发。
第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。
如果希望事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。
// 事件传播到 p 元素后，就不再向下传播了p.addEventListener('click', function (event) {event.stopPropagation();}, true);// 事件冒泡到 p 元素后，就不再向上冒泡了p.addEventListener('click', function (event) {event.stopPropagation();}, false);
案例：
（1）不阻止事件传播的情况
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>32.事件监听</title><style>div{width: 300px;height: 200px;border: 1px solid red;}p{width: 100px;height: 100px;border: 1px solid black;}</style></head><body><div id="div1">hello<p id="p1">world</p></div></body><script>let div1 = document.getElementById('div1');let p1 = document.getElementById('p1');div1.addEventListener('click',function () {console.log('div1');});p1.addEventListener('click',function (event) {console.log(1);});p1.addEventListener('click',function () {console.log(2);});p1.addEventListener('click',function () {console.log(3);});</script></html>
（2）使用stopPropagation阻止事件传播，可以看出外层的div绑定的click事件没有触发。
p1.addEventListener('click',function (event) {// 只能阻止这个事件的传播，但是不能取消事件，后边绑定的click监听函数可以正常触发event.stopPropagation();console.log(1);});
stopPropagation方法只会阻止事件的传播，不会阻止该事件触发<p>节点的其他click事件的监听函数，也就是说后边绑定的click监听函数可以正常触发。
（3）使用stopImmediatePropagation
如果想要彻底取消该事件，不再触发后面所有click的监听函数，可以使用stopImmediatePropagation方法。
stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也就是说，该方法阻止事件的传播，比stopPropagation()更彻底。
如果同一个节点对于同一个事件指定了多个监听函数，这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了stopImmediatePropagation方法，其他的监听函数就不会再执行了。
p1.addEventListener('click',function (event) {// 使得后面绑定的所有click监听函数都不再触发，但是当前的还是可以正常触发event.stopImmediatePropagation();console.log(1);});
前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入
