对js事件流:冒泡和捕获的理解

前言:事件处理最重要的部分是事件捕获(Event capture)和事件冒泡(Event bubbling)这两种机制。为了说明这个问题,这里以W3C官网上的示例图为基础,以事例代码为例子来描述这一过程。下图是事件捕获和事件冒泡的过程。

当渲染引擎接收到一个事件的时候,它会通过HitTest(Webkit中一种检查触发事件在哪个区域的算法)检查哪个元素是直接的事件目标。在下图中,以“a”标签为例,假设它是事件的直接目标,这样,事件会经过自顶向下和自底向上两个过程。

一、什么是事件流

   由上图可知,DOM事件流主要包含三个阶段:

   ➊ 事件捕获阶段(红色箭头)。

   ➋ 目标事件(蓝色区域

   ➌ 事件冒泡阶段 (紫色箭头

二、理解捕获和冒泡

   捕获事件:事件的捕获是自顶向下,这也就是说document对象首先接收到click事件,然后事件沿着DOM树依次向下,一直传播到事件的实际目标,顺序是“#document”——>“html”——>“body”——>“ul”——>“li”——>“p”——>“a”。

   冒泡事件:事件的冒泡过程是自下向上的过程,事件开始是由具体的元素(标签)接收,然后逐级向上传播到最顶层的节点,这个过程像鱼冒泡一样所以叫冒泡事件。

三、添加代码片段帮助理解

   支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。

   

   运行结果:

 

  这下大家知道事件冒泡和捕获的执行顺序了吧。

 

posted on 2021-03-06 11:11  程序员阿田  阅读(176)  评论(0)    收藏  举报

导航