前端关于dom事件流

    技术2022-07-11  122

    定义

    DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。

    DOM事件流模型

    在DOM兼容浏览器中,事件流分为3个阶段:

    (1)捕获阶段:事件从Document节点自上而下向目标节点传播的阶段;

    (2)目标阶段:真正的目标节点正在处理事件的阶段;

    (3)冒泡阶段:事件从目标节点自下而上向Document节点传播的阶段。 

    独特性质

    DOM事件流最独特的性质是,文本节点也触发事件(在IE中不会),当鼠标单击“单击此文本”文本时会触发click事件,该事件的捕获阶段最先开始,从Document节点开始逐渐向下传播,直到“单击此文本”文本节点,事件进入目标阶段,在目标阶段结束之后,事件由“单击此文本”文本节点开始事件的冒泡阶段,直到Document节点为止。 

    另外,需要说明的是,有些事件是可以取消的,在整个事件流的任何位置通过调用事件的stopPropagation方法可以停止事件的传播过程。 

    事件冒泡

    <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body> <div> <p> <text>点我</text> </p> </div> </body> </html>

    顺序:text → p → div → body → html → document

    事件捕获顺序刚好相反:document → html → body → div → p → text

    Processed: 0.012, SQL: 9