当一个事件触发了一个有父元素的元素（例如我们的<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. bugku 变量1

    变量1 题目信息 flag In the variable ! <?php error_reporting(0); include "flag1.php"; highligh ...

  2. 什么情况下用vue.use方法

    链接:https://blog.csdn.net/lxiang222/article/details/103376150 简而言之

  3. Sass&Scss入门 选择器 混合器 导入 条件判断 迭代

    Sass 基于ruby的一种将脚本解析成CSS的脚本语言.也可以说是一种预处理语言. Sass在css的语法基础上增加了变量.嵌套.混合.继承.导入等高级功能. 使用Sass与Sass样式库(如com ...

  4. Spring AOP编程(一)-AOP介绍

    1. AOP介绍 l         在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术 ...

  5. Docker - 命令 - docker container

    概述 整理 docker 容器的命令 1. 分类(25个) 查看 ls diff logs inspect port stats top 生命周期 pause prune create kill re ...

  6. centos 添加rpmfusion源，yum 安装 ffmpeg

    rpmfusion提供了,在Fedora和 centos 源之外的其他yum 源 例如ffmpeg 在 centos 基础源和epel-release 里面都没有, 但是可以在rpmfusion中找到 ...

  7. star_namelist

    Yua Mikami Shion Utsunomiya Mizuho Uehara Yui Hatano 波多野结衣 Tsubasa Amami Rei Mizuna 水菜丽 Eimi Fukada ...

  8. Django 创建app 应用，数据库配置

    一.create project mkdir jango cd jango 目录创建project myapp django-admin startproject myapp 2.在给project创 ...

  9. SpringCloud全家桶学习之路由网关----Zuul（六）

    一.Zuul概述 (1)Zuul是什么? Zuul包含了对请求的路由和过滤的两个最主要的功能,其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础:而过滤功能则负责对请求的 ...

  10. 深入细枝末节，Python的字体反爬虫到底怎么一回事

    内容选自 即将出版 的<Python3 反爬虫原理与绕过实战>,本次公开书稿范围为第 6 章——文本混淆反爬虫.本篇为第 6 章中的第 4 小节,其余小节将 逐步放送 . 字体反爬虫开篇概 ...