事件捕获和事件冒泡

news2024/11/26 4:43:33

事件捕获和事件冒泡与事件流有关系。 

以下代码,点击 aa ,控制台会打印什么呢?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div onclick="lia('div')">
      <p onclick="lia('p')">aa</p>
    </div>
  </body>
  <script>
    function lia(str) {
      console.log(str);
    }
  </script>
</html>

 这就是事件冒泡,从内层向外层传递事件流。

而事件捕获正相反,通过外层到内层。

 

阻止事件冒泡:

  • e.stopPropagation()
  • window.event.cancelBubble = true

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/922578.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

文件容灾备份方案,软件容灾备份方案

信息是企业的核心资产。然而&#xff0c;信息数据丢失的风险接踵而至。事故系统异常、病毒攻击、硬件损坏和自然灾害都可能导致重要数据的丢失。这就是为什么文档灾难恢复备份计划如此重要。本文将详细介绍文档灾难恢复备份计划的必要性&#xff0c;以及如何实施有效的备份方案…

数据结构(7)

B树 B树中允许一个节点拥有多个key。设定参数M&#xff0c;构造B树 1.每个结点最多右M-1个key&#xff0c;并且以升序排列 2.每个结点最多右M个子结点 3.根节点至少右两个子结点 通过磁盘预读&#xff0c;将数据放到B树中&#xff0c;3层B树可容纳1024*1024*1024差不多10亿…

数据结构基础:P3-树(上)----编程作业01:List Leaves

本系列文章为浙江大学陈越、何钦铭数据结构学习笔记&#xff0c;系列文章链接如下&#xff1a; 数据结构(陈越、何钦铭)学习笔记 文章目录 一、题目描述二、整体思路与实现代码 一、题目描述 题目描述&#xff1a; 给定一棵树&#xff0c;按照从上到下、从左到右的顺序列出所有…

Netty源码剖析之FastThreadLocal机制

版本信息&#xff1a; JDK1.8 Netty-all:4.1.38.Final 传统的ThreadLocal机制 讲netty的FastThreadLocal机制&#xff0c;就不得不提及到JDK自带的ThreadLocal机制&#xff0c;所以下面会用一小段篇幅介绍一下ThreadLocal机制&#xff5e; ThreadLocal的机制&#xff0c;大致…

【云原生】Docker私有仓库 RegistryHabor

目录 1.Docker私有仓库&#xff08;Registry&#xff09; 1.1 Registry的介绍 1.2 Registry的部署 步骤一&#xff1a;拉取相关的镜像 步骤二&#xff1a;进行 Registry的相关yml文件配置&#xff08;docker-compose&#xff09; 步骤三&#xff1a;镜像的推送 2. Regist…

Unable to Locate package python2| Linux Ubuntu系统下python2的安装

Linux Ubuntu系统下python2的安装 FSL的安装脚本是用Python2写的&#xff0c;新版本的Ubuntu &#xff08;16以后&#xff09;在默认情况下没有安装Python2。在终端输入 python2&#xff0c;若提示没有相应的命令&#xff0c;则需要先安装Python2&#xff0c;如下指令&#xf…

如何把aac转化为mp3?大家和我一起往下学习

如何把aac转化为mp3&#xff1f;aac是一种先进的音频编码格式&#xff0c;通过较小的文件大小提供出色的音质体验。然而&#xff0c;由于其相对较少的普及度&#xff0c;与MP3相比&#xff0c;兼容性稍显不足&#xff0c;有些播放器可能无法直接识别aac格式。在某种程度上&…

ORB-SLAM2算法9之图像帧Frame

文章目录 0 引言1 Frame类1.1 构造和重载函数1.1.1 双目相机1.1.2 RGBD相机1.1.3 单目相机 1.2 成员函数1.2.1 特征点去畸变1.2.2 特征点网格分配1.2.3 双目匹配1.2.4 RGBD相机深度计算 1.3 成员变量 2 Frame类的用途 0 引言 ORB-SLAM2算法7详细了解了System主类和多线程和ORB…

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】

&#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【一】&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…

华为OD机试 - 过滤组合字符串 - 深度优先搜索dfs算法(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…

共享数据-vue3

vuex方案 安装vuex4.x 两个重要变动&#xff1a; 去掉了构造函数Vuex&#xff0c;而使用createStore创建仓库 为了配合composition api&#xff0c;新增useStore函数获得仓库对象&#xff1b;获取路由对象使用useRouter global state 由于vue3的响应式系统本身可以脱离…

node.js 简单实验 创建一个简单的web服务

概要&#xff1a;用一个最简单是例子感受一下node.js 的能力 1.代码 var http require("http") http.createServer(function (request, response) { response.writeHead(200, {Content-Type: text/plain}); response.end(Hello World\n); }).listen(8081); cons…

浪潮信息企业级SSD:降本又增效?AIPR技术解决高并发读取性能大问题

NAND闪存作为一种非易失性存储介质&#xff0c;凭借其功耗低、重量轻、性能佳和断电后仍然能保存数据等特点&#xff0c;成为比硬盘驱动器更好的存储设备&#xff0c;非常适合作为便携设备的存储器来使用。 固态硬盘&#xff08;Solid State Disk&#xff0c;简称SSD&#xff0…

灯笼解算—kinfx

kinfx 刚刚开始学 做的可能比较复杂了。 skleton ——画的骨骼 rigpose 主要控制动态 sin((0.05*Framech(“…/Ctrol/ofset”))*ch(“…/Ctrol/freq”))*ch(“…/Ctrol/amp”) 用的简单的sin函数 变成实心 方便控制弯曲 原地做完 匹配ani位置 matrix mat point(1, transform…

智慧能源管理系统助力某制造企业提高能源利用效率

随着全球能源需求不断增加和能源价格的上涨&#xff0c;企业和机构日益意识到能源管理的重要性。传统的能源管理方式不仅效率低下&#xff0c;还容易造成资源浪费和环境污染。因此&#xff0c;许多企业开始探索采用智慧能源管理系统来提高能源利用效率&#xff0c;降低能源成本…

C#__自定义类传输数据和前台线程和后台线程

// 前台线程和后台线程 // 默认情况下&#xff0c;用Thread类创建的线程是前台线程。线程池中的线程总是后台线程。 // 用Thread类创建线程的时候&#xff0c;可以设置IsBackground属性&#xff0c;表示一个后台线程。 // 前台线程在主函数运行结束后依旧执行&#xff0c;后台线…

GNS3的使用

一、实验目的&#xff1a; 了解GNS3的使用方法&#xff0c;能够用GN3建立和模拟网络模型&#xff0c;并且将GNS3关联wireshark&#xff0c;进行抓包 二、预备知识和主要步骤&#xff1a; GNS3就是一个可以构建虚拟网络的软件 1&#xff0e;熟悉GNS3的界面&#xff0c;了解按键…

C#_多线程编程入门

字面理解&#xff1a;多个线程同时工作的过程。 案例① 单线程 #region ① 单线程做菜/// <summary>/// ① 单线程做菜:执行任务时,什么操作都动不了./// </summary>/// <param name"sender"></param>/// <param name"e">…

只需半分钟,ARMS 帮你配置出“高质量”告警

作者&#xff1a;图杨 背景 某位资深运维工程师A&#xff1a;“一天不收个几十条告警&#xff0c;我都觉得心里不踏实” 。运维工程师B&#xff1a;“我那几个告警天天告&#xff0c;我的应用一点问题都没有&#xff0c;但是我又不敢关”。运维工程师C&#xff1a;“我每天都…

安果天气预报 产品介绍

软件介绍版本号 2.0.5 安果天气预报&#xff1a;全世界覆盖&#xff0c;中国定制 想要查找北京、上海、纽约、东京还是巴黎的天气&#xff1f;一款简约的天气预 报应用为你呈现。专注于为用户提供纯净的天气体验&#xff0c;我们不发送任何打扰的通知。包含空气质量、能见度、…