PDA

View Full Version : what is event delegation?



illuminum
28 Jun 2008, 9:37 AM
Automatic event delegation!
el.on('click', this.onClick, this, {delegate: 'li.some-class'});


So, I try it out:


layout: {
init: function() {
this.view.init();
var west_el = this.view.components.west.getEl();
var east_el = this.view.components.east.getEl();
west_el.on('click', this.events.westClick, this.view, {
delegate: this.view.components.east.id
});
east_el.on('click', this.events.eastClick, this.view);
},
view: {
init: function() {
this.components = {
center: new Ext.Panel({
id: Ext.id(),
title: 'center region',
html: 'body',
region: 'center'
}),
west: new Ext.Panel({
id: Ext.id(),
title: 'west region',
region: 'west',
layout: 'fit',
html: 'body',
width: 200,
}),
east: new Ext.Panel({
id: Ext.id(),
title: 'east region',
html: 'body',
region: 'east',
width: 200,
})
};
this.body = new Ext.Panel({
id: Ext.id(),
layout: 'border',
renderTo: 'viewport',
plugins: [new Ext.ux.plugins.FitToParent()],
defaults: {
collapsible: true,
split: true
},
items: [this.components.center, this.components.west, this.components.east]
});
},
},
events: {
westClick: function() {
console.log('west click', this);
},
eastClick: function() {
console.log('east click', this);
}
}
}


Doesn't seem to work as I expected it to, which leads me to believe I don't quite understand what event delegation is.

Animal
28 Jun 2008, 11:54 AM
The event handler will only recieve notification if the origin of the event was a <li class="some-class">

evant
28 Jun 2008, 4:57 PM
To explain a bit more, say you had 100 hrefs with a class of foo on your page.

Instead of having to setup 100 separate click handlers, you could setup a single click handler on the body.

If you set the delegate to 'a.foo', the event will check if the event source came from something that matches 'a.foo'.