From cba2c1b555f397224df6326866790edab815946a Mon Sep 17 00:00:00 2001 From: Yangshun Date: Mon, 27 Nov 2023 09:03:30 +0800 Subject: [PATCH] quiz(js): improve event delegation question --- .../explain-event-delegation/en-US.mdx | 51 +++++++++++++++++-- .../explain-event-delegation/pt-BR.mdx | 45 ++++++++++++++-- .../explain-event-delegation/zh-CN.mdx | 51 +++++++++++++++++-- 3 files changed, 138 insertions(+), 9 deletions(-) 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: +// + +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 `