先看一张图(图片来自网络,如有侵权联系本博主)
这就是一个完整的事件流
DOM(Document Object Model 文档对象模型),是一个树型结构。当DOM中某一个HTML元素产生一个事件时,该事件会在该元素结点与DOM的根结点之间按特定的方式进行传播,也就是说,该条路径上所经过的所有结点都会收到该事件,这个传播过程称之为DOM事件流。
事件在DOM中传播的顺序有两种类型:事件捕获和事件冒泡
冒泡型事件:事件由该结点一直传播到根结点,一直往上冒。
捕获型事件:和冒泡型事件刚好相反,它是从根结点一直传播到该结点,从上到下的一个过程。
标准的事件传播分为三个阶段:
1)事件捕获阶段
事件沿着DOM数向下传递,经历目标结点的每一个祖先结点,直到目标结点。(如用户点击了一个
超链接,则该点击事件将从document结点到html结点,body结点以及包含该链接的父亲结点)
在此过程中,浏览器都会检测针对该事件的捕获事件监听器,并运行该事件监听器。
2)目标触发阶段
浏览器在查找到已经指定给目标元素的事件监听器后,就会运行该事件监听器。
3)事件冒泡阶段
事件将沿着DOM树向上传递,再次逐个访问目标元素的祖先结点到document结点。
在此过程中,浏览器都会将检测那些不是捕获事件监听器的事件监听器,并执行它们。
注意:所有的事件都经过捕获阶段和目标阶段,但并不是所有的事件都会经过冒泡阶段。
例如,让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。
顺便解释下:停止事件冒泡和阻止事件的默认行为这两个概念,这两个概念非常重要,它们对复杂的应用程序处理非常有用。
1.停止事件冒泡
停止事件冒泡是指,停止冒泡型事件的进一步传递(取消事件传递,不只是停止IE和DOM标准共有的冒泡型事件,我们还可以停止支持DOM标准浏览器的捕捉型事件,用topPropagation()方法)。例如上图中的冒泡型事件传递中,在body处理停止事件传递后,位于上层的document的事件监听器就不再收到通知,不再被处理。
2.阻止事件的默认行为
停止事件的默认行为是指,通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作(如果存在这样的动作)。例如,如果表单中input type 属性是 “submit”,点击后在事件传播完浏览器就自动提交表单。又例如,input 元素的 keydown 事件发生并处理后,浏览器默认会将用户键入的字符自动追加到 input 元素的值中。