DOM事件流

事件流：事件在目标元素和祖先元素间的触发顺序。
要了解DOM事件流需要先了解冒泡和捕获。
捕获(Capture)：事件由最顶层逐级向下传播, 直至到达目标元素。
冒泡(Bubble)：事件由第一个被触发的元素接收, 然后逐级向上传播。

通俗的讲捕获就是你所触发事件(例如点击事件)，在触发开始后，这个事件会DOM顶层一步步向下找，知道找到触发了这个事件的那个元素。而冒泡则相反，是你所触发事件以后，从触发事件的这个元素上，一层层向父级元素传播，直到最顶层为止。至于为啥会有这两个玩意，不能做统一吗？这就可以去追述到微软和网景(上香)早期扯皮了。

所以现在事件出发后会经过三个阶段：
捕获阶段：事件从最顶层元素 window 一直传递到目标元素的父元素。
目标阶段：事件到达目标元素，如果事件指定不冒泡，那就会在这里中止。
冒泡阶段：事件从目标元素父元素向上逐级传递直到最顶层元素 window。
注释：这三个阶段执行顺序为
事件捕获->目标 ->事件冒泡 也就是说先捕获后冒泡
onClick是在冒泡阶段执行的
这里可能要问了如果我们用addEventListener去给元素绑定click，那这个绑定的点击事件和onClick哪个先执行，答案是代码里哪个先写哪个先执行

终止事件传播
这里重点关注一个事件函数stopPropagation
stopPropagation的作用是终止当前事件流，也就是说，在那个步骤终止了事件，后面的时间都不会执行了，如果在事件捕获阶段调用了，那后面的目标阶段，冒泡都不会执行了