Delegated Event Handling

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
    }
})