PDA

View Full Version : Event delegation



alex_monk
16 Mar 2012, 9:25 AM
Hi, all!
How can i delegate event on panel to the dom via selector?

alex_monk
16 Mar 2012, 9:30 AM
this.element.on({
delegate: '.x-button',
tap: function (e) {
alert();
}
});

i tried this code, but it doesn't work. e.target points on childs of node with class x-button

Jacky Nguyen
16 Mar 2012, 11:17 PM
e.delegatedTarget is what you need.

alex_monk
17 Mar 2012, 5:44 AM
Thank you, Jacky Nguyen. This is really what i need.
But what if i try
this.element.on({
delegate: 'input',
tap: function (e) {


}
});
and this event is not fired??

alex_monk
17 Mar 2012, 6:29 AM
or for example, if i have radio field, and in that case i delegate event to input or to its css classes .x-input-radio then event is not fired!! what i've missed???

Jacky Nguyen
17 Mar 2012, 2:38 PM
Radio / Checkbox inputs have masking elements on top of them, hence the inputs themselves never receive touch events directly. Within a field, you should delegate to '.x-field-input' instead.

However adding listeners like this is extremely discouraged, since you're tightening your code with the raw DOM structure of the components, which will very likely change in the future. Both Radio field and Checkbox field fire 'check' and 'uncheck' events and you should utilize them instead.

alex_monk
17 Mar 2012, 10:20 PM
Thanks a lot for the explanation. This information is very useful