More than ever, we believe that rich mobile apps created with HTML5 and CSS3 are the future of the mobile experience

More than ever, we believe that rich mobile apps created with HTML5 and CSS3 are the future of the

mobile experience. We also believe that developers continue to need SDK’s and tools to navigate the

complexity of the HTML5 stack and the inevitable device and browser anomalies that create so much

developer misery. We hope you’ll continue to find Sencha Touch is the most complete solution to your

problems. And besides… it’s now free!

Recently, we were asked to analyze the performance of an application made with Sencha Touch. One of the

main problems we found was the use of inline event handlers on items inside Lists and DataViews. This

showed me that although more experienced Ext developers may know how to properly use event delegation,

many new developers using Sencha Touch may not. So here, I will give a quick overview of what event

delegation is, and how you should take advantage of it in Sencha Touch.

The most common use case for event delegation is probably in Lists. Often you will want to bind a

listener to a specific element that exists in each row of a List (for example the avatars in a list of

users). Many developers might be inclined to add an inline onclick attribute to each one of these

elements. This has a couple of major drawbacks. First and foremost, it means that the browser will use

memory for each one of these listeners. It also has a negative impact on the overall performance of the

application. Having event listeners on many elements in the DOM generally slows down the rendering of,

and interaction with, the page. This is especially the case on mobile devices with limited hardware

capabilities.