浅谈JavaScript中的事件委托

本篇文章给大家介绍一下javascript中的事件委托。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

浅谈JavaScript中的事件委托

事件委托

利用事件冒泡,指定一个事件处理程序,管理一系列的所有事件
事件委托利用DOM元素的事件冒泡,把子元素的相关事件委托(代理)给父元素监听处理。

什么是事件冒泡?

在JavaScript中,事件触发后会在子元素和父元素之间传播。

1.png

立即学习“Java免费学习笔记(深入)”;

事件捕获(从顶层到底层)
元素事件触发后,会从window对象将事件传导到目标节点目标阶段
在目标节点上触发事件冒泡(从底层到顶层)
元素事件触发后,会从目标节点传导回window对象,事件委托就是利用的冒泡机制事件委托
因为事件始终会冒泡到父元素,并且父元素会获取到所触发事件对应的子元素节点相关信息,以及event中的事件属性,因而只需要对目标节点的父元素进行事件委托,即可处理相应事件

事件委托的好处

可以提高JavaScript事件处理的性能

可以动态添加相关的DOM元素,子元素的变动不会重新修改事件绑定

例如:

2.png

对li元素进行绑定事件,必须循环对应li元素并绑定事件

3.png

通过事件委托只需要对ul父元素绑定事件,当触发事件时,会将对应的子元素相关事件冒泡到ul事件处理程序中,只需要判断对应事件中target是否是li子元素,再做对应逻辑处理即可。

更多编程相关知识,请访问:编程视频!!

以上就是浅谈JavaScript中的事件委托的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2712817.html

(0)
上一篇 2025年3月7日 21:18:10
下一篇 2025年2月27日 12:37:24

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript中如何更好地使用数组

    本篇文章给大家介绍一下如何在 javascript 中更好地使用数组。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 本文短小精悍,我保证。在过去的数个月里,我注意到在我审阅的 pull request 中有四个(关于数组…

    2025年3月7日
    200
  • 10个让你效率更高的Math对象方法,快来收藏吧!

    本篇文章给大家介绍一下能让你事半功倍的10个math对象方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 JavaScript中的math 对让我们能够对执行一些数学操作。 它具有数学常数和函数的属性和方法。 在今天的…

    2025年3月7日
    200
  • js怎么替换html标签

    在js中,可以利用replace()函数配合正则表达式“//g”来替换html标签,语法格式“stringObject.replace(//g,”)”。replace()可以替换一个与正则表达式匹配的子串。 本教程操作环境:wi…

    2025年3月7日
    200
  • 深入解析JavaScript中的作用域

    本篇文章带大家深入理解javascript作用域。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 这篇文章称为笔记更为合适一些,内容来源于 《你不知道的JavaScript(上卷)》第一部分 作用域和闭包。讲的很不错,非常…

    2025年3月7日
    200
  • 分享12个提升程序员软技能与效率的开发工具

    本篇文章给大家推荐12个提升程序员软技能与效率的开发工具。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~ 这一期的内容有点不一般哦,先来几个在线绘图类的工…

    2025年3月7日 编程技术
    200
  • Math.max()不带参数会返回什么?为什么?

    本篇文章给大家介绍一下math.max()不带参数会返回什么?为什么?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 Math.max() 是 JS 内置的方法,可以从传入的参数中,返回最大的一个。例如: Math.max…

    2025年3月7日
    200
  • 手把手教你理解JS中的执行上下文

    本篇文章一步步带你深入理解javascript中的执行上下文。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 只有理解了执行上下文,才能更好地理解 JavaScript 语言本身,比如变量提升,作用域,闭包等 执行上下文 …

    2025年3月7日
    200
  • 深入了解TypeScript中的5种设计模式

    本篇文章带大家深入了解5 种 typescript设计模式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 设计模式是可以帮助开发人员解决问题的模板。在本中涉及的模式太多了,而且它们往往针对不同的需求。但是,它们可以被分为…

    2025年3月7日
    200
  • 手把手带你弄懂JavaScript中的异步编程

    本篇文章带大家了解javascript中的异步编程。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 异步,就是非同步…. 这节内容可能会有点枯燥,但是却是 JavaScript 中非常重要的概念,非常有必要去学…

    2025年3月7日 编程技术
    200
  • 一文了解JavaScript中合并和克隆对象的方法

    本篇文章给大家介绍一下javascript中合并和克隆对象的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 当我们想要复制原始值和引用值(对象)时,它们的行为会大不相同。 原始值 我们假设一个变量 name 具有一个…

    2025年3月7日
    200

发表回复

登录后才能评论