Increasing Efficiency by Attaching DOM to the Parent Element
Explore methods to improve web application efficiency by attaching DOM events to parent elements instead of individual child elements. Understand how this technique reduces the number of event listeners, optimizes event handling using RxJS operators like pluck and pairwise, and simplifies managing user interactions such as mouseover and clicks. This lesson helps you build cleaner, more performant reactive web apps by handling events efficiently regardless of dynamic data volume.
We'll cover the following...
Experienced front-end developers know that creating many events on a page is a recipe for bad performance. In our previous example, we created three events for each row. If we get 100 earthquakes on the list, we would have 300 events floating around the page just to do some light highlighting work! That is terrible for performance, and we can do better.
Because events in DOM always bubble up—from children to parent elements—a well-known technique among front-end developers to avoid attaching mouse events to many elements individually is to attach them to ...