当一个事件触发了一个有父元素的元素（例如我们的<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. Linux Centos7文件系统

    上期教大家创建分区,刚分区完成后没有文件系统,分区不能使用.本期教大家创建文件系统,(文件系统:操作系统通过文件系统管理文件及数据,创建文件系统的过程俗称格式化.)没有文件系统的设备称之为裸(raw) ...

  2. Go性能调优

    文章引用自   Go性能调优 在计算机性能调试领域里,profiling 是指对应用程序的画像,画像就是应用程序使用 CPU 和内存的情况. Go语言是一个对性能特别看重的语言,因此语言中自带了 pr ...

  3. Yii2手动安装第三方扩展

    对于没有进入composer的扩展,请通通将他们下载到vendor内. 然后,打开vendor/yiisoft/extensions.php 文件,在里面的数组里增加一项,如下面代码 'SDK/Lvb ...

  4. 数据库程序接口——JDBC——功能第二篇——数据源之C3P0数据源

    综述 C3P0由三部分内容组成.实例化对象,各配置项的含义,以及加载配置项的方式. 实例化对象的方式有三种,第一种方式直接new ComboPooledDataSource,第二种方式使用工厂类Dat ...

  5. 解决teamviewer试用期到期的方法

    Teamviewer是一款远程控制软件,使用过程中系统弹出“Teamviewer试用版已到期”的提示, 需要用户购买许可证或延长试用期才能继续使用,解决teamviewer试用期到期问题步骤如下: 出 ...

  6. Go计时器

    1. NewTimer package main import ( "time" "fmt" ) func main() { /* 1. func NewTim ...

  7. C语言当中int,float,double,char这四个有什么区别？

    区别在以下方面: 一.定义方面: 1.int为整数型,用于定义整数类型的数据 . 2.float为单精度浮点型,能准确到小数点后六位 . 3.double为双精度浮点型,能准确到小数点都十二位 . 4 ...

  8. php 移动操作数组函数

    下面的几个主要是移动数组指针和压入弹出数组元素的和个函数. 函数 功能 array_shift 弹出数组中的第一个元素 array_unshift 在数组的开始处压入元素 array_push 向数组 ...

  9. yii2 password hash生成与验证方法

    1.生成 $password是明文.如:123456 $this->password_hash = Yii::$app->security->generatePasswordHash ...

  10. org.apache.catalina.connector.ClientAbortException: java.io.IOException: 你的主机中的软件中止了一个已建立的连接。

    org.apache.catalina.connector.ClientAbortException: java.io.IOException: 你的主机中的软件中止了一个已建立的连接. at org ...