One other way developers can easily create unnecessary strain on the user's browser is by creating too many event handlers. For instance, let's say you want to create a large table (perhaps 20 rows × 20 columns), so you create a parent View
for the table and a large number of child Views
for each cell. So far so good! Now let's say, you add a click
event handler to each of these child Views
. Without realizing it, you just created 400 event handlers. If you add another event handler, such as a change
handler for <input>
elements inside the cell, you add another 400, and so on.
Given enough Views
and enough event handlers, this can eventually create a performance issue, but luckily, JavaScript comes with a built-in mechanism that we can use to solve this problem: event bubbling. Whenever an event occurs in the DOM, it first triggers event handlers on the relevant DOM element and then bubbles up to each successive parent of that element. In other words, if a click
event...