当一个事件触发了一个有父元素的元素（例如我们的<video>时)，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。

在捕获阶段：

  • 浏览器检查元素的最外层祖先（<html>）是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
  • 然后，它移动到<html>中的下一个元素，并执行相同的操作，然后是下一个元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反:

  • 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
  • 然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。

【摘录自MDN】对事件冒泡和捕捉的解释的更多相关文章

  1. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  2. 【事件流】浅谈事件冒泡&&事件捕获------【巷子】

    首先在扯淡的时候我们需要先了解一个东西,这个东西就是事件流. 1.什么是事件流? 解释:当一个HTML元素触发一个事件处理函数的时候,该事件会在该元素节点到根节点之间传播,传播路径所经过的节点都会接受 ...

  3. 事件冒泡(event bubbling)与事件捕捉(event capturing)

    事件捕捉: 单击<div>元素就会以下列顺序触发click 事件. Document => Element html => Element body => Element ...

  4. js事件冒泡和事件捕捉

    结论:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发 ...

  5. JavaScript事件——冒泡、捕获

    本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...

  6. js 事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

  7. JQuery阻止事件冒泡---阻止后续代码执行

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  8. 事件冒泡是什么如何用jquery阻止事件冒泡

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  9. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

随机推荐

  1. Java“被迫”退出争霸，Python继续霸占首位！老牌程序员：我不服

    2019年转眼已经接近尾声,如果盘点下2019年最火的语言,除了Python还能有谁?你心中的王者语言又是谁? 这一年Python风光无限 这一年JAVA走向右边 这一年,我们都很感慨,你呢? 关于P ...

  2. static的使用总结

    全局静态变量 全局变量前加上关键字static,全局变量就定义成一个全局静态变量.,全局静态变量存储在静态存储区,在整个程序运行期间一直存在.全局静态变量在程序运行之前就存在. 初始化:未经初始化的全 ...

  3. C++转换构造函数和隐式转换函数

    今天是第一次听到C++还有个转换构造函数,之前经常见到默认构造函数.拷贝构造函数.析构函数,但是从没听说过转换构造函数,隐式转换函数也是一样,C++的确是够博大精深的,再次叹服!          其 ...

  4. 简单json 转换为 map、对象

    1.如果转换的是Map.或者是简单的对象 package com.gc.action; import java.util.Map; import net.sf.json.JSONObject; /** ...

  5. 【C语言】scanf()输入浮点型数据

    #include<stdio.h> int main() { double x1, x2, x3, x4; printf("输入2个浮点数x1,x2:\n"); sca ...

  6. 粪发涂墙-Redis

    Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间: 3.redis使用多路复用技术,可以处理并发的连接.非阻塞 ...

  7. C++ explicit的作用

    explicit作用: 在C++中,explicit关键字用来修饰类的构造函数,被修饰的构造函数的类,不能发生相应的隐式类型转换,只能以显示的方式进行类型转换. explicit使用注意事项: * e ...

  8. 高级命令之awk

    1.提取文件内容 2.提取ip

  9. 连接(JOIN)

    join 用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. INNER JOIN 从多个表中返回满足 JOIN 条件的所有行. INNER JOIN:如果表中有至少一个匹配,则返回行 L ...

  10. <位运算> 任意二进制数 异或两个相同的二进制数 还是原本的值

    二进制,即0与1. 因为两个相同的二进制 异或必为0.(类似于不进位加法) 二进制里与0异或为其原本的0与1.. 可得任意二进制数 异或两个相同的二进制数 还是原本的值. 可用于交换和加密.