diff --git a/packages/quiz/questions/explain-event-delegation/en-US.mdx b/packages/quiz/questions/explain-event-delegation/en-US.mdx
index bdf0d4d34..63d560bc7 100644
--- a/packages/quiz/questions/explain-event-delegation/en-US.mdx
+++ b/packages/quiz/questions/explain-event-delegation/en-US.mdx
@@ -2,7 +2,52 @@
title: Explain event delegation
---
-Event delegation is a technique involving adding event listeners to a parent element instead of adding the event listeners to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to the event bubbling up the DOM. The benefits of this technique are:
+Event delegation is a design pattern in JavaScript used to efficiently manage and handle events on multiple child elements by attaching a single event listener to a common ancestor element. This pattern is particularly valuable in scenarios where you have a large number of similar elements, such as list items, and want to streamline event handling.
-- Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
-- There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
+## How Event Delegation works
+
+1. **Attach a listener to a common ancestor**: Instead of attaching individual event listeners to each child element, you attach a single event listener to a common ancestor element higher in the DOM hierarchy.
+1. **Event bubbling**: When an event occurs on a child element, it bubbles up through the DOM tree to the common ancestor element. During this propagation, the event listener on the common ancestor can intercept and handle the event.
+1. **Determine the target**: Within the event listener, you can inspect the event object to identify the actual target of the event (the child element that triggered the event). You can use properties like `event.target` or `event.currentTarget` to determine which specific child element was interacted with.
+1. **Perform action based on target**: Based on the target element, you can perform the desired action or execute code specific to that element. This allows you to handle events for multiple child elements with a single event listener.
+
+## Benefits of event delegation
+
+1. **Efficiency**: Event delegation reduces the number of event listeners, improving memory usage and performance, especially when dealing with a large number of elements.
+1. **Dynamic elements**: It works seamlessly with dynamically added or removed child elements, as the common ancestor continues to listen for events on them.
+
+## Example
+
+Here's a simple example using modern ES6 syntax:
+
+```js
+// HTML:
+//
+// - Item 1
+// - Item 2
+// - Item 3
+//
+
+const itemList = document.getElementById('item-list');
+
+itemList.addEventListener('click', (event) => {
+ if (event.target.tagName === 'LI') {
+ console.log(`Clicked on ${event.target.textContent}`);
+ }
+});
+```
+
+In this example, a single click event listener is attached to the `` element. When a click event occurs on an `- ` element, the event bubbles up to the `
` element, where the event listener checks the target's tag name to identify which list item was clicked.
+
+## Use Cases
+
+Event delegation is commonly used in scenarios like:
+
+- Managing lists, menus, or tables with many items or rows.
+- Handling dynamic content in single-page applications.
+- Simplifying code by avoiding the need to attach and remove event listeners for elements that change.
+
+## Resources
+
+- [MDN Web Docs on Event Delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
+- [JavaScript.info - Event Delegation](https://javascript.info/event-delegation)
diff --git a/packages/quiz/questions/explain-event-delegation/pt-BR.mdx b/packages/quiz/questions/explain-event-delegation/pt-BR.mdx
index 7b8e36b76..d6223a197 100644
--- a/packages/quiz/questions/explain-event-delegation/pt-BR.mdx
+++ b/packages/quiz/questions/explain-event-delegation/pt-BR.mdx
@@ -2,7 +2,46 @@
title: Explique delegação do evento
---
-A delegação do evento é uma técnica que envolve adicionar ouvintes de eventos a um elemento pai em vez de adicionar os ouvintes do evento aos elementos descendentes. O ouvinte será disparado sempre que o evento for acionado nos elementos descendentes, devido à propagação do evento através do DOM. Os benefícios desta técnica são:
+A delegação de eventos é um conceito fundamental no desenvolvimento web que permite gerenciar e tratar eventos eficientemente em vários elementos filhos, anexando um único ouvinte de eventos a um elemento ancestral comum. Em vez de atribuir ouvintes de eventos a cada elemento filho individualmente, você delega a responsabilidade de lidar com eventos ao elemento pai ou ancestral, que intercepta os eventos à medida que eles sobem na árvore DOM e identifica o alvo do evento.
-- A quantia de memória diminui porque somente um único handler é necessário no elemento pai, em vez de ter que anexar manipuladores de eventos em cada elemento descendente.
-- Não há necessidade de desvincular o manipulador dos elementos que são removidos e vincular o evento para novos elementos.
+## Benefícios da delegação de eventos
+
+1. **Eficiência**: A delegação de eventos reduz significativamente o número de ouvintes de eventos em seu código, tornando-o mais eficiente em termos de memória e melhorando o desempenho, especialmente ao lidar com um grande número de elementos semelhantes. Isso resulta em um código mais limpo e de fácil manutenção.
+
+2. **Elementos Dinâmicos**: A delegação de eventos funciona perfeitamente com elementos gerados ou removidos dinamicamente no DOM. Você não precisa anexar ou remover ouvintes de eventos toda vez que novos elementos são adicionados ou removidos. O ouvinte de eventos delegado os trata automaticamente.
+
+## Exemplo
+
+Vamos ilustrar a delegação de eventos com um exemplo moderno usando a sintaxe do ES6:
+
+```javascript
+// HTML:
+//
+// - Item 1
+// - Item 2
+// - Item 3
+//
+
+const itemList = document.getElementById('item-list');
+
+itemList.addEventListener('click', (event) => {
+ if (event.target.tagName === 'LI') {
+ console.log(`Clicou em ${event.target.textContent}`);
+ }
+});
+```
+
+Neste exemplo, um único ouvinte de eventos de clique é anexado ao elemento ``. Quando ocorre um evento de clique em um elemento `- `, o evento se propaga até o elemento `
`, onde o ouvinte de eventos verifica o nome da tag do alvo para identificar qual item da lista foi clicado.
+
+## Casos de uso
+
+A delegação de eventos é comumente usada em várias situações, incluindo:
+
+1. Gerenciamento de listas, menus ou tabelas com muitos itens ou linhas.
+1. Manipulação de conteúdo dinâmico em aplicativos de página única.
+1. Simplificação do código, evitando a necessidade de anexar e remover ouvintes de eventos para elementos que mudam.
+
+## Recursos
+
+- [MDN Web Docs sobre Delegação de Eventos](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
+- [JavaScript.info - Delegação de Eventos](https://javascript.info/event-delegation)
diff --git a/packages/quiz/questions/explain-event-delegation/zh-CN.mdx b/packages/quiz/questions/explain-event-delegation/zh-CN.mdx
index 5678edeeb..f8f95958c 100644
--- a/packages/quiz/questions/explain-event-delegation/zh-CN.mdx
+++ b/packages/quiz/questions/explain-event-delegation/zh-CN.mdx
@@ -2,7 +2,52 @@
title: 解释事件委托
---
-事件委托是一种技术,涉及将事件监听器添加到父元素,而不是将事件监听器添加到子元素。 由于事件在DOM上冒泡,每当事件在后代元素上被触发时,监听器就会启动。 这种技术的好处是:
+事件委托是 JavaScript 中的一种设计模式,用于通过将单个事件监听器附加到共同的祖先元素,高效地管理和处理多个子元素上的事件。这个模式在你有大量类似元素(例如列表项)并希望简化事件处理的情况下尤为有价值。
-- 内存占用减少,因为父元素只需要一个单个处理程序,而不必附加每个后代的事件处理程序。
-- 没有必要从已删除的元素中解绑处理器、将事件绑定到新元素。
+## 事件委托的工作原理
+
+1. **将监听器附加到共同的祖先元素**:与将单独的事件监听器附加到每个子元素不同,你将一个单一的事件监听器附加到 DOM 层次结构中较高的共同祖先元素上。
+1. **事件冒泡**:当事件在子元素上发生时,它通过 DOM 树冒泡到共同祖先元素。在此传播期间,共同祖先上的事件监听器可以拦截并处理事件。
+1. **确定目标**:在事件监听器内部,你可以检查事件对象以识别事件的实际目标(触发事件的子元素)。你可以使用`event.target`或`event.currentTarget`等属性来确定与哪个特定子元素进行了交互。
+1. **根据目标执行操作**:根据目标元素,你可以执行所需的操作或执行特定于该元素的代码。这使你能够使用单个事件监听器处理多个子元素的事件。
+
+## 事件委托的优点
+
+1. **效率**:事件委托减少了事件监听器的数量,提高了内存使用和性能,特别是在处理大量元素时。
+1. **动态元素**:它与动态添加或删除的子元素无缝配合,因为共同祖先继续监听它们的事件。
+
+## 示例
+
+以下是使用现代 ES6 语法的简单示例:
+
+```js
+// HTML:
+//
+// - 项目 1
+// - 项目 2
+// - 项目 3
+//
+
+const itemList = document.getElementById('item-list');
+
+itemList.addEventListener('click', (event) => {
+ if (event.target.tagName === 'LI') {
+ console.log(`单击了 ${event.target.textContent}`);
+ }
+});
+```
+
+在此示例中,单个点击事件监听器附加到了``元素上。当在`- `元素上发生点击事件时,事件冒泡到了`
`元素,事件监听器检查目标的标签名称以识别单击的列表项。
+
+## 用例
+
+事件委托通常用于以下情况:
+
+- 管理具有许多项目或行的列表、菜单或表格。
+- 处理单页面应用程序中的动态内容。
+- 通过避免为发生更改的元素附加和移除事件监听器来简化代码。
+
+## 资源
+
+- [MDN Web 文档关于事件委托](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
+- [JavaScript.info - 事件委托](https://javascript.info/event-delegation)