js事件流

2023-05-16

 

 事件流指的是事件完整执行过程中的流动路径

 事件流分为捕获阶段和冒泡阶段

捕获阶段是从父到子;冒泡阶段是从子到父

事件冒泡:

 

事件冒泡概念:

当一个元素的事件被触发的时候,同样的事件将会在该元素的祖先元素中依次被触发。这一过程被称为事件冒泡

简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件,例如:都是'click',儿子触发,相同的事件的祖宗才会触发

事件冒泡是默认存在的

 事件捕获:

从DOM的根元素开始去执行对应的事件(从外到里)

事件捕获需要写对应代码才能看到效果

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

说明

addEventListener第三个参数传入ture代表是捕获阶段触发(很少使用)

若传入false代表冒泡阶段触发,默认就是false、

若是用L0事件监听,则只有冒泡阶段,没有捕获

阻止事件流动:

 目标:能够写出阻止事件流动的代码

因为默认就有冒泡行为的存在,所以容易导致事件影响到父级元素

若想把事件就限制在当前的元素内,就需要阻止事件流动

阻止事件流动就需要拿到事件对象

语法:

事件对象.stopPropagation()

方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效

 

鼠标经过事件:

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave 没有冒泡效果(推荐使用)

阻止默认行为方法:

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js事件流 的相关文章

  • Tsai分享:资源分享(1)——视觉SLAM十四讲及视频

    Tsai分享 xff1a 资源分享 xff08 1 xff09 视觉SLAM十四讲及视频 一 视觉SLAM十四讲 如若转载请附上链接 xff1a https blog csdn net weixin 43338642 article det
  • pycharm如何查看python文件的工作目录

    在找bug的过程中发现python文件的工作目录和存放目录地址有可能是不一样的 xff0c pathlib路径操作中的pathlib Path cwd 获取的是工作目录而不是存放目录地址发现工作目录和存放目录地址不同的时候一定要修改过来 x
  • C++中vector的用法详解

    文章目录 构造函数增加函数删除函数遍历函数判断函数大小函数交换函数赋值函数改变空间 构造函数 span class token comment vector 创建一个空vector span vector span class token
  • 华为技术面

    文章目录 手撕代码流程题目描述方法介绍面试官评价思维扩展 项目描述技术问题内存说明下C 43 43 的内存分配情况 xff0c 栈和队列的区别以及程序员如何分配回收内存 xff1f C 43 43 程序员和Java程序员有一个很大的区别 x
  • 华东师范大学计算机学硕2023考研经验贴

    文章目录 1 个人经历1 1 一战1 2 二战1 3 心态 2 初试2 1 政治2 2 英语2 3 数学2 4 408 3 复试3 1 机试A 数字猜想B 特殊质数C 最小字符串D 数字排序E 整数分解 3 2 英语面试3 3 综合面试 1
  • Go后端部署服务器

    go后端部署服务器方式一 xff1a xff08 最简单 xff09 和暑假做重点场所项目部署一样 xff0c 简单 xff0c 无脑 xff0c 手动 xff0c 麻烦 span class token number 1 span spa
  • 数据分析实用python程序

    文章目录 1 pdf转txt2 判断txt文件是否为空3 获取txt文件每一行4 获取文件夹所有文件名5 读写xlsx表格6 遍历txt每个字符7 字符串中字符替换 1 pdf转txt span class token comment de
  • 51单片机之数码管

    1 静态数码管原理图 LED数码管根据LED的不同接法分为两类 xff1a 共阴和共阳 为了显示数字或字符 xff0c 必须对数字或字符进行编码 七段数码管加上一个小数点 xff0c 共计8段 因此为LED显示器提供的编码正好是一个字节 共
  • 银行排队模拟(队列)

    银行排队模拟程序 队列类Queue ifndef span class token constant QUEUE H span define span class token constant QUEUE H span struct Rec
  • C/C++中struct和class的区别

    目录 struct class struct和class的区别 struct struct是描述一个数据结构的集合 xff0c 像一周有七天 xff0c 你可以把一周看成是一个结构体 xff0c 然后在结构体里面定义一个数组来存放这个七天
  • java枚举(enum)使用详解

    文章目录 前言一 枚举类型定义二 访问成员三 遍历四 在switch xff08 xff09 中使用枚举五 方法1 内置方法1 1 ordinal 用于返回成员的索引1 2 compareTo 用于比较枚举类型中两个成员的索引值1 3 va
  • 分析url从输入到展过程中的页面优化、performance

    浏览器会开启一个线程处理URL请求 url从输入到展示页面的过程 1 输入网址 2 DNS解析 3 建立tcp连接 xff08 请求队列queuing 请求等待stalled 4 客户端发送HTPP请求 5 服务器处理请求 6 服务器响应请
  • 双重锁单例模式

    不忘初心 xff0c 思考梦开始的地方 普通的懒汉式和饿汉式都不用管 简单实现一下线程安全的方式 span class token keyword public span span class token keyword class spa
  • VScode神仙插件,程序员必备

    前言 Visual Studio Code VS Code 是微软2015年推出的一个轻量但功能强大的源代码编辑器 xff0c 基于 Electron 开发 xff0c 支持 Windows Linux 和 macOS 操作系统 它内置了对
  • 【Java】使用Java实现爬虫

    文章目录 使用Java实现爬虫一 HttpClient实现模拟HTTP访问1 1 HttpClient1 2 引入依赖1 3 创建简单的请求操作1 3 1 创建实例1 3 2 Jsoup应用 1 4 爬取过程中可能出现的问题1 4 1 JS
  • STM32 HAL库+ESP8266+华为云物联网平台

    文章内容 xff1a STM32 HAL库通过串口发送AT指令完成与ESP8266的控制实现接入华为云物联网平台 xff0c 并完成基本通信与控制 xff0c 包括设备属性上报和命令下发解析与响应 文末获取 STM32 HAL库 43 ES
  • MySQL事务篇

    文章目录 说明 xff1a 事务篇一 事务隔离级别是怎么实现的 xff1f 二 MySQL 可重复读隔离级别 xff0c 完全解决幻读了吗 xff1f 说明 xff1a 此类文章是为小林coding的图解MySQL xff0c 所简写 xf
  • Android studio TCP网络调试助手应用开发(支持TCP Server与Client切换)

    在前几篇的文章中带大家完成了基于TCP的物联网安卓应用开发 xff0c 教程内容是创建了一个TCP客户端并连接服务器完成数据通信的过程 xff0c 后不久又发布了一个ESP8266创建TCP 服务器与安卓的客户端进行通信的一个文章 xff0
  • 【FreeRTOS】中断管理

    在介绍本文之前 xff0c 向大家推荐个非常容易入门的人工智能学习网站 xff0c 建议点击收藏 目录 xff1a 1 前言2 内核提供两套API2 1 优点2 2 缺点2 3 常用API函数列表2 4 pxHigherPriorityTa
  • 【嵌入式基础】内存(Cache,RAM,ROM,Flash)

    1 前言 最近在看赛普拉斯的一款芯片CYW8019规格书 xff0c 里面有好几个内存的关键字 xff08 如下图的右上方 xff09 xff0c 本文将聊它们的含义和作用 2 Cache Cache是集成在CPU内部的极高速缓存 一般来讲

随机推荐

  • 使用Promise解决多个请求数据并发问题

    首先引用一下阮一峰大佬的一段话 xff1a Promise xff0c 简单说就是一个容器 xff0c 里面保存着某个未来才会结束的事件 xff08 通常是一个异步操作 xff09 的结果 从语法上说 xff0c Promise是一个对象
  • 1. KVM虚拟化学习

    1 什么是虚拟化 虚拟化 xff0c 通过模拟计算机的硬件 xff0c 来实现同一台计算机上运行多个不同的操作系统的既技术 2 为什么要使用虚拟化 为了充分利于资源 xff0c 软件运行环境的隔离 xff0c 只要有虚拟化才能实现 虚拟化提
  • 二次再散列法

    散列表 设所有可能出现的关键字集合记为U 简称全集 实际发生 即实际存储 的关键字集合记为K xff08 K 比 U 小得多 xff09 散列方法是使用函数h将U映射到表T 0 m 1 的下标上 xff08 m 61 O U xff09 这
  • CICD中clang-tidy静态语义检查

    教程 xff1b https hokein github io clang tools tutorial 要用clang tidy首先要在电脑上安装clang tools Linux Ubuntu系统 span class token fu
  • Vscode 设置clang-format

    用户设置与工作空间设置 VS Code提供了两种设置方式 xff1a 用户设置 xff1a 这种方式进行的设置 xff0c 会应用于该用户打开的所有工程 xff1b 工作空间设置 xff1a 工作空间是指使用VS Code打开的某个文件夹
  • 同步异步电机ADRC控制系统仿真

    之前一直使用PI控制器做异步电机矢量控制 xff0c 最近想把ADRC控制也放到异步电机矢量控制上去 xff0c 所以对其进了仿真 xff0c 可遇到了一个一直没有解决掉的问题 xff0c 现记录下来 xff0c 请各位先辈进行指教以及为遇
  • 大疆A型板使用经验分享(八)——FreeRTOS操作系统的使用

    一 freeRTOS操作系统 操作系统 operating system 本质上是一个帮助用户进行功能管理的软件 操作系统运行在硬件之上 为其他工作的软件执行资源分配等管理工作 一般称呼不使用操作系统的单片机开发方式为 裸机开发 当进行裸机
  • MySQL锁篇

    文章目录 说明 xff1a 锁篇一 MySQL有那些锁 xff1f 二 MySQL 是怎么加锁的 xff1f 三 update 没加索引会锁全表 xff1f 四 MySQL 记录锁 43 间隙锁可以防止删除操作而导致的幻读吗 xff1f 五
  • C++学习笔记

    文章目录 一 基础入门1 常量2 关键字3 数据类型3 1 整型3 2 浮点型3 3 字符型3 4 字符串类型3 5 布尔类型 4 数据的输入与输出5 运算符6 数组6 1 一维数组6 2 二维数组 7 函数8 指针9 结构体 二 核心编程
  • JS实现继承的几种方式

    JS继承的实现方式 堪称最全最详细 前沿看js继承这块时我看的几个教程都是说的很简单或者是没有说全就自行百度看了好多总结了下有 xff1a 1 构造函数继承 2 原型链继承 3 组合继承 4 class继承 5 实例继承 6 拷贝继承 7
  • 51单片机入门之点亮发光二极管

    1 任务书 用51单片机控制一个发光二极管 xff0c 打开单片机后LED亮 2 分析 首先是考虑电路连接问题 单片机所有1 O 口都可以驱动发光二极管 设选用P2 0 来接发光二极管 xff0c 所谓 闪亮 xff0c 就是点亮发光管后
  • 51单片机入门之开关控制

    1 任务书 使用拨扭开关控制led xff0c 用微动开关控制led 2 分析 拨钮开关无非就是 打开 跟 关闭 两个状态 xff0c 也就是0跟1 xff0c 打开无非就是接通关闭无非就是断开 那我们应该怎么接入单片机了 xff0c 其实
  • 51单片机静态动态数码管显示

    51单片机静态动态数码管显示 通过此实训了解动态数码管的显示原理 xff0c 掌握编码方法 共阴极和其阴极数码管的不同之处及常用设计方法 实训设备 这里使用的377锁存器模块控制的数码管下面就是电路图 显示内容 在显示模块的八位 LED 数
  • 51单片机矩阵键盘控制数码管

    51单片机矩阵键盘控制数码管 我们先了解矩阵键盘的工作原理 xff0c 掌握编码方法并能够编写出扫描程序 xff0c 使用矩阵键盘控制数码管输出矩阵键值 显示内容 在显示模块的八位 LED 数码的个位显示当前使用矩阵键盘所按下的值 键阵键盘
  • 51单片机继电器控制直流电机正反转

    51单片机继电器控制直流电机正反转 用继电器控制 24V 直流电机的转动与停止 继电器是常用的电气隔离器件 简单的驱动电路是用三极管直接驱动 该电路驱动简单 成本低廉 当控制电路为高电平时 xff0c NPN 型三极管就会饱和导通 xff0
  • 51单片机定时器流水灯控制

    51单片机定时器控制led流水灯数码管进行计数 51单片机根据不同的型号有不同数量的定时器的 xff0c 而这些定时器的大概用法是差不多的我们今天就使用定时器来控制led流水灯 实训要求 使用单片机定时器对led灯进行控制 xff0c 数码
  • esp8266单片机使用MAX7219芯片驱动点阵屏幕

    esp8266单片机使用MAX7219芯片驱动点阵屏幕 我们这里使用的单片机是一块esp8266 xff0c 点阵屏幕的话就是买的普通16脚红色的 xff0c 驱动芯片就是MAX7219芯片 xff0c 只需要依次把芯片的clk xff0c
  • 使用自己开发的app远程控制MAX7219点阵屏幕

    使用自己开发的app远程控制MAX7219点阵屏幕 一 功能介绍 xff1a 二 芯片介绍 xff1a 三 实现原理 xff1a 四 代码部分 xff1a 其它资料 xff1a 一 功能介绍 xff1a 1 可以固定显示想显示的内容 2 点
  • go发送http请求

    说明 xff1a 写项目时候用到的 xff0c go发送http请求用到的一个方法 span class token keyword func span 函数名 span class token punctuation span body
  • js事件流

    事件流指的是事件完整执行过程中的流动路径 事件流分为捕获阶段和冒泡阶段 捕获阶段是从父到子 xff1b 冒泡阶段是从子到父 事件冒泡 xff1a 事件冒泡概念 xff1a 当一个元素的事件被触发的时候 xff0c 同样的事件将会在该元素的祖