Writing better javascript – Part 9

Use Event Delegation and be mindful of the number of event handlers that you are adding

Every time you are adding event handlers to the DOM elements of your web page you are adding to the memory usage of the DOM. So, adding a lot of event handlers in the web page can increase your memory usage. Also, there are greater chances of memory leaks happening if you are not careful writing your code. This may not be a big factor in most cases but it is always good to be aware of what is happening in your code. Especially because most of the JavaScript frameworks can make it real easy to write code which may not be optimal in some cases. This is especially a factor when dealing with tables and list etc. Where the number of elements you are attaching an event handler could potentially be a large number.

Consider the case where you want to the users to be able to delete a row in a table by clicking on the first cell in the row. When thinking about implementing this requirement, it is easy to write something like this when using the jQuery framework

$(“table#large tr td:first-child”).click(function(e) {
    $(this).parent(“tr”).remove();
});

In the case above, you are attaching an event handler to a cell in every row of the table. If your table contains are large number of rows, you will be attaching potentially thousands of event handlers to your DOM. This may not be an optimal solutions. These kinds of circumstances can be tackled in another better way using the event bubbling property of the DOM. We can attach attach just a single event handler to the table itself instead of every first cell of every row in the table and use the ‘originalTarget’ property of the jQuery event object to determine whether the user clicked on the first cell in a row and then proceed to remove the row as needed. This technique of attaching the event handler to the container and to the individual elements is sometimes referred to as ‘Event Delegation’. The above code snippet can be re-written to read like below using Event Delegation.

$(“table#large”).click(function(e) {
    if (e.originalTarget.tagName == “TD”) {
        if (e.originalTarget === $(e.originalTarget).parent(“tr”).find(“:first-child”).get(0)) {
            $(e.originalTarget).parent(“tr”).remove();
        }
    }
});

You shouldn’t have to worry about this scenario too much unless if the number of items you are dealing with is considerably large. But it is good to be aware of it and this knowledge might come in handy when you are trying to trace performance issues or memory leak origins.

Another HUGE benefit of using the Event Delegation technique is that when new rows are added to the table via AJAX then we don’t have to worry about attaching the event handlers to the newly added rows. Everything will just keep working as expected as we have just attached the event handler to the containing DOM element which then checks for the expected conditions.

Advertisement