事件流:事件在目标元素和祖先元素间的触发顺序。
要了解DOM事件流需要先了解冒泡和捕获。
捕获(Capture):事件由最顶层逐级向下传播, 直至到达目标元素。
冒泡(Bubble):事件由第一个被触发的元素接收, 然后逐级向上传播。
通俗的讲捕获就是你所触发事件(例如点击事件),在触发开始后,这个事件会DOM顶层一步步向下找,知道找到触发了这个事件的那个元素。而冒泡则相反,是你所触发事件以后,从触发事件的这个元素上,一层层向父级元素传播,直到最顶层为止。至于为啥会有这两个玩意,不能做统一吗?这就可以去追述到微软和网景(上香)早期扯皮了。
所以现在事件出发后会经过三个阶段:
捕获阶段:事件从最顶层元素 window 一直传递到目标元素的父元素。
目标阶段:事件到达目标元素,如果事件指定不冒泡,那就会在这里中止。
冒泡阶段:事件从目标元素父元素向上逐级传递直到最顶层元素 window。
注释:这三个阶段执行顺序为
事件捕获->目标 ->事件冒泡 也就是说先捕获后冒泡
onClick是在冒泡阶段执行的
这里可能要问了如果我们用addEventListener去给元素绑定click,那这个绑定的点击事件和onClick哪个先执行,答案是代码里哪个先写哪个先执行
终止事件传播
这里重点关注一个事件函数stopPropagation
stopPropagation的作用是终止当前事件流,也就是说,在那个步骤终止了事件,后面的时间都不会执行了,如果在事件捕获阶段调用了,那后面的目标阶段,冒泡都不会执行了