当一个事件发生时，当前 DOM 元素本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中。事件向上传递的过程便是事件冒泡。这是一个典型的责任链模型，由责任链上的节点依次对事件进行处理。当然，必要的时候我们也可以根据需要禁止事件的传播。
比如，当多个嵌套的 DOM 元素均监听同一事件时，如果我们不阻断事件的传播，事件会自下而上被依次处理：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <body onclick=‘console.log("from body");‘> <div onclick=‘console.log("from div");‘> <button onclick=‘console.log("from button");‘>点击我</button> </div> </body> </html>
处理事件的顺序是 button---> div ---> body 。
与事件冒泡对应的是事件捕获，事件捕获的顺序与事件冒泡的顺序相反，由外层到内层依次对事件进行捕获：
原文：https://www.cnblogs.com/niuyourou/p/12507985.html