Take the following DOM structure:
<div id="colors"> <div id="red" class="primary">Red</div> <div id="green" class="secondary">Green</div> <div id="blue" class="primary">Blue</div> </div>
Simple approach for handling clicks on each color:
Ext.fly('red').on('click', function(){ /*...*/ }); Ext.fly('green').on('click', function(){ /*...*/ }); Ext.fly('blue').on('click', function(){ /*...*/ });
A better approach using delegation:
Ext.fly('colors').on('click', function(e,t){ switch(t.id){ case 'red': // ... case 'green': // ... case 'blue': //... } })
Delegation also allows you to filter events for more advanced processing:
Ext.fly('colors').on('click', function(e,t){ var t = e.getTarget('.primary'); if(t){ // handle only primary colors } })