JavaScript事件代理/事件冒泡

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量368 收藏 7
点赞数 9
分类专栏： javaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61914498/article/details/135691851
版权

事件代理又称为事件委托

事件代理：就是把原本的需要绑定在子元素的响应事件委托给我父元素让父元素担当事件监听的职务

 事件代理的原理是dom元素的事件冒泡

        事件冒泡是把时间从触发元素逐级向上传播直到根元素

        通常的docment

        事件捕获是指事件从触发元素开始从根元素逐级向下传播直到根元素

        事件捕获机制

                        是允许元素在子元素处理事件之前对事件进行处理

                        常见addEventlistener()为元素增加事件处理程序并通过第三个参数指定使用事件捕获还是事件冒泡 默认false

                false 事件冒泡  true事件捕获

        阻止事件冒泡

                阻止事件冒泡是为了避免触发元素的事件处理程序

                常见event.stoppropagation 来阻止事件冒泡

                使用阻止事件冒泡只会影响当前事件的传播并不会影响其他监听的事件

                        event,stoppropagation   只能阻止事件冒泡  

                                                               不能阻止事件捕获

weixin_61914498
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript 事件代理需要注意的地方
11-19
总结来说，JavaScript 事件代理是一种高效且强大的技术，但在实际应用中需要谨慎处理`event.target`和事件冒泡的问题，以确保事件处理的准确性和代码的清晰性。合理运用事件代理，可以提升网页的性能和用户体验。
JavaScript事件代理和委托详解
11-23
JavaScript事件代理 事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。 这主要得益于浏览器的事件冒泡...
Javascript——事件代理 / 事件委托
weixin_56286359的博客
03-13 255
Javascript中事件代理原理案例
JS事件冒泡捕获事件代理
qq_44741577的博客
02-01 818
事件机制是指当特定的操作(如点击按钮、移动鼠标等)在DOM元素上发生时，会触发相应的事件。JavaScript通过监听事件并绑定对应的处理函数来响应用户的操作，对用户的交互做出响应。
【前端】详解JavaScript事件代理（事件委托）
热门推荐
06-10 1万+
【前端】详解JavaScript事件代理（事件委托）
Javascript 时间冒泡之事件代理
灬Manong 博客
08-27 135
绑定时间与添加data <div @click="orderSelIndex"> <div v-for="(list,index) in 6" :key="index" :data-listIndex="index" > js代码 orderSelIndex(event){ // ES6的语法，用let声明一个变量 let target=event.target||e.srcElement //不断取父节点来替换target whil
JavaScript——事件代理/事件委托
goldgirly的博客
11-20 265
JavaScript于html的交互是通过事件来实现的。浏览器窗口发生特定的交互，侦听器获取到事件发生，JavaScript执行相应代码。 事件代理 事件代理 (事件委托) 利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 优点 减少与dom的交互次数，减少事件处理程序的数量，提高代码性能。 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运...
javascript事件冒泡和事件捕获
天空影
04-24 310
定义 冒泡：作用于子元素上的事件会一级一级向上传递，类似于冒泡的形式。 捕获：作用于父元素的事件会一级一级向下传递到最终的子元素。 使用方法 EventTarget.addEventListener()语法： element.addEventListener(event, function, useCapture) //event:click,mousedown,mouseup,...
事件代理（事件委托）、事件冒泡
v_jinfuwu的博客
01-18 764
事件代理（事件委托），事件冒泡事件代理（事件委托）事件冒泡 事件代理（事件委托） 事件代理又称为事件委托，一般作用于当多个相同元素需要使用同一个事件时，可以委托给他们的同一父元素上进行处理，这样会优化性能，不用给每个子元素都注册一遍事件，节省代码空间，减少代码冗余，减少事件注册； 事件委托的原理是DOM元素的事件冒泡 事件冒泡 事件冒泡是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件 事件冒泡又分为三个阶段： 1、捕获阶段：从window对象传导到目标节点
JavaScript 事件委托/事件代理
左手121
02-09 780
简介 根据几个概念了解 JavaScript 事件委托： 事件(event)：这是一个抽象的概念。定义一个对象在特定状态下所执行的动作。（自己定义的，网上找不到比较理想的定义。如果谁有更好的定义方式请留言。）例如：onclick事件、onmouseover事件、onmouseout事件等。 委托(delegate)：请求别人帮自己做事。 例子： 情况一：A、B、C三人在一家公司。周一他们需
JavaScript(11)：事件代理
dawn0718的专栏
02-12 521
　　在JavaScript中，事件代理又称为事件委托，就是把子对象的监听事件绑定到事件源对象的父对象上，利用事件冒泡原理触发事件。 　　优点： 　　1. 提高性能，不需要所有对象都绑定事件； 　　2. 灵活，动态创建的新对象不需要绑定事件。 　　缺点： 　　1、有的处理不方便而可能影响速度，比如在对象上的鼠标移入和鼠标移出处理； 　　2、需要有选择地阻止事件冒泡。 　　1、捕获和冒泡 　　事件的冒泡：事件从DOM树的底层，层层向外传递，直至传递到DOM的根节点。 　　事件的捕获：事件从DOM树的根节点，
浅析JavaScript的事件代理和委托
02-25
首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于...
Javascript事件流（事件捕获、事件冒泡）,事件委托（代理）
01-08
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 623
注释很详细，直接上代码……
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 958
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 332
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 261
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 558
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
事件代理获取li的内容 脚本之家
09-09
事件代理是一种在JavaScript中常用的技术，它可以通过在父元素上监听事件，并使用事件冒泡的原理，来实现对子元素的操作。在获取li的内容时，事件代理也能派上用场。 比如说，我们有一个ul元素，其中包含了多个li...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值