Increasing Efficiency by Attaching DOM to the Parent Element

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 their parent element instead. Once the event is fired on the parent element, we can use the event’s target property to find the child element that was the event’s target.

Because we’ll need similar functionality for the click and mouseover events, we’ll create the getRowFromEvent function: