冒泡和捕获，搞定它

最新推荐文章于 2024-05-05 23:05:52 发布
最新推荐文章于 2024-05-05 23:05:52 发布
阅读量106 收藏
点赞数
分类专栏： 基础 文章标签： 冒泡 捕获 事件 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slenty/article/details/79436502
版权

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="five">555
    <div id="four">444
      <div id="three">333
        <div id="two">222
          <div id="one">111

          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  document.getElementById('five').addEventListener('click', function(){
    alert('5')
  })
  document.getElementById('four').addEventListener('click', function(){
    alert('4')
  })
  document.getElementById('three').addEventListener('click', function(){
    alert('3')
  }, true)
  document.getElementById('two').addEventListener('click', function(){
    alert('2')
  })
  document.getElementById('one').addEventListener('click', function(){
    alert('1')
  })
</script>
</html>
<style>
  #five {
    width: 200px;
    height: 200px;
    border: 2px solid black;
  }
   #four {
    width: 150px;
    height: 150px;
    border: 2px solid black;    
  }
   #three {
    width: 100px;
    height: 100px;
    border: 2px solid black;
  }
   #two {
    width: 70px;
    height: 70px;
    border: 2px solid black;    
  }
   #one {
    width: 30px;
    height: 30px;
    border: 2px solid black;    
  }
</style>

第一，把第三个参数都设成false(即默认)

点击three, alert的结果是3 4 5，冒泡

点击two, alert的结果是 2 3 4 5，冒泡。顺序冒泡

第二，把第三个参数都设成true

点击three, alert的结果是5 4 3，捕获

点击two, alert的结果是 5 4 3 2，捕获。顺序捕获

第三，只把第三个参数设成true, 如代码所示

点击three, alert的结果是3 4 5

点击two, alert结果是3 2 4 5

点击two, alert结果是 3 1 2 4 5，这个最经典。试试咯

slenty
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js之事件冒泡和事件捕获详细介绍
01-19
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。  IE 5.5: div -> body -> document  IE 6.0: div -> body -> html -> document  Mozilla 1.0: div -> body -> ...
javascript事件冒泡和事件捕获详解
10-24
最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家。
【React】1420- 搞定 React 异常捕获和处理机制
pingan8787
08-22 450
React 异常处理最重要的目标之一就是保持浏览器的Pause on exceptions行为。这里你不仅能学到 React 异常捕获的知识，还能学到如何模拟 try catch大纲React 开发和生产环境捕获异常的实现不同如何捕获异常，同时不吞没用户业务代码的异常如何模拟 try catch 捕获异常React 捕获用户所有的业务代码中的异常，除了异步代码无法捕获以外。React 使用 han...
事件捕获和时间冒泡，event.stopPropagation()；event.preventDefault()；和js jquery取消事件
qlin_11的博客
09-29 444
你感觉脸上有些挂不住，找了个借口，“我家里有点急事，先回家了，明天告诉你”。回到家，你没有像往常一样打开游戏，而是打开电脑，在搜索框中输入了“event.stopPropagation 是什么”。” 你熟练关掉了知乎，写了个事件监听，然后面向console.log编程，去看是否输出了东西。你感到燥热，脱下格子衫，祭出第二个杀招，event.preventDefault()。“奇怪，没有生效”，你有些疑惑，但这打击不到你。你仔细看了下自己的逻辑，没有问题，又重启了服务，点击，依然没有生效。
重新认识vue之事件阻止冒泡
w13707470416的博客
12-20 153
冒泡的表现 近期用vue做了一个需求，大概是同一个区域，点击不同位置有不同的响应函数，还有个总的响应函数，好吧，如下图所示: 他们的DOM结构如下: &amp;lt;div v-for="(item, index) in listData" @click="handleClick3"&amp;gt; &amp;lt;el-col :span="grid"&amp;gt; ...
【面经整理】事件流冒泡 + css垂直居中
EVELESLIE的博客
03-17 203
第一次收到笔试题，发现自己存在很多不足。再次进行复习。
（四）简析JS中事件，事件绑定，事件冒泡，事件捕获和事件执行顺序
qq_33345511的博客
10-25 168
今天我们一起来学习一下什么是事件代理和事件委托 3.什么是事件带和事件委托 事件代理和事件委托来源于事件冒泡机制，一个交互丰富的网页，离不开各种复杂的事件，事件太多就会造成网页性能下降，有内存泄露的风险，事件代理和事件委托可以使对象不被直接接触，避免内存泄露和网页性能下降的风险 事件委托：当网页中需要触发事件的对象比较多时，为了避免内存泄露，把事件委托到其父对象上，借助事件冒泡机制，可以将事...
事件的阶段---捕获，冒泡
weixin_34259232的博客
09-18 54
事件的阶段分为捕获，（目标），冒泡 用一张 图来 表示 　　用一句话来描述：浏览器通常搜寻顺序是从最外层往里层捕获，然后到达目标，再从最里层往最外层冒泡。 因此，一个事件什么时候执行，就看这个事件是绑定在哪个阶段了，用这么一个api来搞定addEventListenser() 转载于:https://www.cnblogs.com/furoro/p/5880801.h...
2024年最新金九银十｜前端真实面试知识点梳理_前端项目经历的 star 法则(1)，分分钟搞定
2401_84183669的博客
05-05 777
保证函数是独立可复用的，每次实例化一个组件的时候，都是可以生成一个data对象的，相互之间不干扰。
前端面试技巧和注意事项_前端面试必备技巧
weixin_39724382的博客
12-21 265
2020最全的前端面试指南，一个多月 1.8w 字的面试经验积累，凭借它最终成功入职大厂……今年的金三银四刚好赶上疫情，很多大公司都停止招聘甚至裁员，想跳槽的小伙伴被打的措手不及。需求减少要求肯定随之提高，谨以此面经献给在如此艰难之时逆风而动、勇敢坚强的你~前言今年问的难度和深度应该比前几年有所增加，下面从总体分析和重要点两个维度来分析一下：总体分析前端问的最多的还是 js基础、计算机网络基础等，...
JS里addEventListener和on的区别
打杂人
04-20 1341
一、首先介绍两者的用法1.on的用法：以onclick为例第一种：obj.onclick = function(){ //do something.. }第二种：obj.onclick= fn; function fn (){ //do something... }第三种：当函数fn有参数的情况下使用匿名函数来传参：obj.onclick = function(){fn(param)}; func...
JS中事件冒泡和事件捕获介绍
11-27
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
pillow_jxl_plugin-1.2.5-cp39-none-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
vue3事件冒泡和捕获
09-15
在 Vue 3 中，事件冒泡和事件捕获与原生 JavaScript 中的事件模型类似。Vue 使用了一种基于组件层级的事件模型来处理事件。 在 Vue 3 中，事件默认使用的是冒泡（bubbling）阶段。当一个子组件触发了一个事件时，该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值