In the TodaysLink project, i used event bubbling and event delegation to optimize it as follows.
Currently, at the top of the site main page, you can select one of several tags as shown in the image below.
Previously, event handlers were assigned to each of the <Tag/> components to detect which events were selected for tags.
I can't say that this method is wrong, but I thought that the following areas could be improved through event bubbling and event delegation.
1. It is inefficient for memory usage that event handlers are assigned to all existing <Tag/> components.
If the event handler is registered in <TagList/>, the parent element surrounding the <Tag/> component,
Within the event handler function, if you write a code to check which event originated from which Component, you can process the event through one event handler as a result.
Therefore, from a memory usage perspective, there is only one event handler that deals with events with multiple tags, making it more efficient.
2. There is no need to assign additional event handlers to elements that may be added dynamically in the future.
In the current TodaysLink project, the <Tag/> components are not dynamically added in the future, so this is not the case,
I think it is an improvement method that can be fully considered when implementing web pages through pure JavaScript
In conclusion, event bubbling and event delegation allowed me to benefit from the perspective of less memory usage and improved maintenance.
Before improvement
After improvement
