事件捕获与冒泡

最新推荐文章于 2024-11-01 14:48:20 发布
最新推荐文章于 2024-11-01 14:48:20 发布
阅读量68 收藏
点赞数
分类专栏： 笔记 文章标签： java html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54256573/article/details/121526431
版权

捕获：从外层向里层去获取

冒泡：从里层向外层去冒泡

事件委托：子元素要达到某种效果，将事件委托给父元素，来实现效果。

           对于子元素较少的情况下，使用循环遍历来实现效果，但子元素较多的时候依次遍历会比较麻烦，增加负载量，此时就可以用过给父元素委托事件来实现子元素要达到的效果。

步骤：目标是实现点击每一个li标签，对应的那个消失

1、获取ul：let  ul=document.getElementById('ul')

2、对ul绑定事件

ul.οnclick=function(e){

ul.removeChild(e.target)

}

拓展：e.target的用法

 

weixin_54256573
关注
专栏目录
js基础之事件捕获与冒泡原理
10-16
相对地，事件冒泡模型则由微软提出，它的顺序与事件捕获相反。在事件冒泡中，当在 p 元素上发生点击事件时，事件会首先在 p 元素上触发，然后传递到其父级 div，最后到达最外层的 body 元素。因此，在事件冒泡的阶段...
事件冒泡、事件捕捉、事件代理(事件委托)
commeil的博客
04-04 349
事件冒泡 如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
事件冒泡与事件捕获
01-20
**事件捕获** 则是另一种事件传播模式，与冒泡相反。它从DOM树的根节点开始，向下遍历到事件实际发生的地方。也就是说，事件首先由最外层元素处理，然后逐步传递给其子元素，直至到达目标元素。事件捕获的目标是为了...
js代码-面试题---Array.prototype.sort() 底层原理,事件捕获与冒泡理解
07-16
事件捕获与冒泡是JavaScript事件处理中的两个重要概念。事件捕获是从文档根节点开始，逐级向下传播到目标元素的过程，而事件冒泡则是从目标元素开始，逐级向上至文档根节点的过程。这两种机制允许我们决定事件处理...
js事件机制----捕获与冒泡机制实例分析
10-15
JavaScript事件机制是JavaScript...总的来说，理解JavaScript的事件捕获与冒泡机制是编写高效、可维护的交互式Web应用的关键。通过合理利用这两种机制，开发者可以实现复杂的用户交互，同时确保代码的效率和可扩展性。
[自用，更新自day5]瑞吉外卖代码及笔记
最新发布
lapiii的博客
11-01 442
当使用ThreadLocal维护变量时，ThreadLocal为每个使用该变量的线程提供独立的变量副本，所以每一个线程都可以独立地改变自己的副本，而不会影响其它线程所对应的副本。Mybatis Plus公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，避免了重复代码。因为在分页查询的Dish的records(菜品记录中)，只有这个菜品所属的categoryId，但是我们需要分页的时候展示的是菜品名字。
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1295
项目功能：商品分类,商品信息,用户。
Hadoop生态圈框架部署（二）- 配置IP地址映射为主机名及免密登录
zcs2312852665的博客
10-29 1255
介绍在虚拟机hadoop1、hadoop2和hadoop3配置IP地址映射为主机名配置虚拟机hadoop1、hadoop2和hadoop3互相免密登录。
（1）Java 编程基础概览：数据类型、常量、变量、标识符与运算符
码界领航的Cherry Yang的博客
10-28 1058
8 位，占1个字节，有符号的，范围 -128（-2^7）至 127（2^7-1）。32 位，占4个字节，范围 -2,147,483,648（-2^31）至 2,147,483,647（2^31 - 1）。Java 提供了六种数字类型，其中四个为整数类型，两个为浮点类型，还有字符类型，以及布尔型。16 位，占2个字节，范围 -32768（-2^15）至 32767（2^15 - 1）64 位，占8个字节，范围 -2^63 至 2^63 - 1。16 位 Unicode 字符，占 2 个字节。
SpringSession源码分析
lkr_lkr的博客
11-01 151
默认对常规Session的理解和使用，如何使用Set-Cookie。
ssm智慧社区电子商务系统+vue
weixin_44832324的博客
10-28 1249
系统能否进行正常工作，功能模块能否实现，程序代码是否有错误，这些都需要通过系统测试来进行判断，测试是程序开发中必不可少的步骤，就算系统一步不差的被开发出来了，但进行测试时总能发现一个之前从没遇到过的问题[26]。在系统开发的整个过程当中都需要不断进行系统测试，根据经验发现，前期的一个小问题，将会酿成后期的一个大问题，所以越早发现，越早解决，才能保证后续的编码、测试和设计能够顺利进行。目前，系统测试所使用的方法主要是黑盒测试，系统测试的目的包括：根据客户的需求来设计用户界面；
Java复习24（PTA)
2301_79272475的博客
10-30 399
Java复习24（PTA)：多种排序的book类*
gbase8s之spring框架用druid中间件报语法错误
weixin_55963561的博客
10-29 277
报错原因2：druid没加validationQuery， druid加上validationQuery就可以了。报错原因1：gbase8s不支持select 1这种语法，应该改成select 1 from dual;
JavaScript的第十一天
全栈学习ing
10-31 618
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
Java学习Day54：初遇萍萍(权限控制)
weixin_51721783的博客
10-29 1107
web.xml：在health_backend工程的web.xml文件中配置用于整合Spring Security框架的过滤器DelegatingFilterProxy。
Java爬虫的京东“寻宝记”：揭秘商品类目信息
2401_87849308的博客
10-30 784
在这个数据驱动的时代，我们就像一群特工，穿梭在数字的海洋中，寻找着隐藏的宝藏——商品类目信息。今天，我们将带领你一起，用Java这把精密的瑞士军刀，深入京东的神秘领域，揭开商品类目的神秘面纱。为了避免被京东的反爬虫机制发现，我们需要设置合理的请求间隔，并且可能需要模拟浏览器的User-Agent。经过一系列的特工任务和挑战，我们终于成功获取了商品的类目信息，并且安全返回。我们需要找到京东商品类目信息的API接口，这将是我们特工任务的起点。在代码的世界里，我们不仅要追求技术的高度，更要追求道德的底线。
Spring学习笔记_16——@Inject
LuckyLay的博客
10-30 1007
Inject注解是JSR330规范中提供的注解，在@Inject注解中不提供任何属性，可以配合@Qualifier注解使用。存在多个类型相同的Bean时，通过@Qualifier注解可以明确指定注入哪个Bean。兼容性@Inject是标准的一部分，因此更通用，可以在多种环境中使用。@Resource主要用于Java EE环境。@Autowired仅适用于Spring框架。查找策略@Inject默认按类型查找。@Resource默认按名称查找，没有找到时再按类型查找。@Autowired。
测试文章测试
繁依Fanyi的博客
10-31 136
【代码】测试文章测试。
数组排序简介-归并排序（Merge Sort）
Runing_WoNiu的博客
10-31 165
采用经典的分治策略，先递归地将当前数组平均分成两半，然后将有序数组两两合并，最终合并成一个有序数组。
DOM事件捕获与冒泡顺序详解：从理论到实践
DOM事件是Web开发中的关键概念，主要涉及两种事件流模式：捕获和冒泡。捕获阶段和冒泡阶段的顺序对于理解和优化网页交互至关重要。以下是详细的解释： 1. **DOM事件流模型**： - **捕获阶段**：事件从文档的根节点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值