事件代理

luffyitcity 2023-01-13 11:52:21

课时名称	课时知识点
事件代理	事件代理

...全文

82 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

基本概念事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举个通俗的例子比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方...

我发现人们可能会混淆什么是事件代理，什么是消息代理。事件代理可以用来代替消息代理，但消息代理不能完全实现事件代理的功能。下面深入比较一下它们。消息代理拥有悠久的历史并已被许多组织用于大型的面向消息中间件架构。消息代理使得系统可以通过发布/订阅消息队列进行网络通信。生产者将消息写入队列，而消费者会消费这些消息并进行相应的处理。然后，消息在消费时得到应答，并立即或在之后不久被删除。消息代理被设计为处理与事件代理不同类型的问题。事件代理是围绕提供有序的事实日志而设计的。

React使用了一种称为“事件代理”（Event Delegation）的机制来处理事件。事件代理是指将事件处理程序绑定到组件的父级元素上，然后在需要处理事件的子元素上触发事件时，事件将被委托给父级元素进行处理。React的事件代理机制有以下几个特点：事件委托：React将事件绑定到组件的父级元素上，而不是直接绑定到每个子元素。这样，不论子元素的数量如何，只需要在父级元素上绑定一个事件处理程序，就可以处理所有子元素的事件。事件冒泡：当子元素上的事件触发时，事件会沿着DOM树从子元素冒泡到父级元素。

事件代理（事件委托），事件冒泡事件代理（事件委托）事件冒泡事件代理（事件委托）事件代理又称为事件委托，一般作用于当多个相同元素需要使用同一个事件时，可以委托给他们的同一父元素上进行处理，这样会优化性能，不用给每个子元素都注册一遍事件，节省代码空间，减少代码冗余，减少事件注册；事件委托的原理是DOM元素的事件冒泡事件冒泡事件冒泡是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件事件冒泡又分为三个阶段： 1、捕获阶段：从window对象传导到目标节点

1. 事件代理介绍事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。事件冒泡代码: <script> $(function(){ var $div1 = $('#div1'); var $div2 = $('#div2'); $div1.click(fu

路飞的课程社区_NO_5

1

社区成员

169

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章