PDA

View Full Version : Event delegation in IE



fadq
25 Jan 2011, 2:33 PM
Hi, I've been playing with ExtJS for a while now and I'm trying to integrate it to some existing html page to help manage the events. Everything is going well in Firefox, but today I've tried my page in IE and I realized that some events are not delegated the way it should.

For example (not actual code, but a proof of concept of what I'm trying to do):
html


<div id="divContainer">
<form id="form01">
<input type="text" name="myinput01" id="myinput01" />
<input type="text" name="myinput02" id="myinput02" />
<input type="text" name="myinput03" id="myinput03" />
<-- other inputs get generated after the page is loaded -->
</form>
</div>
js


Ext.onReady ( function ()
{
Ext.get("divContainer").on("blur", function (evt, el) { //on blur, change, click, etc
//some code
},this, {delegate : "input[name^=myinput]"});
});
Any event I delegate gets fired on Firefox but on IE8, only the click event seems to work, the blur and the change event is never fired.

So is this a bug or a feature?

aconran
25 Jan 2011, 2:59 PM
Event bubbling for the blur event is problematic.
http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

And take a look at the compatibility chart here:
http://www.quirksmode.org/dom/events/index.html

darthwes
25 Jan 2011, 3:32 PM
@aconran
What a reference, makes me feel young again. quirksmode has always been ftw reading, even in the late 90's if memory serves me. To the point, I was just informed (on this thread (http://www.sencha.com/forum/showthread.php?121888-Add-a-contextmenu-listener-on-a-form-fields-Label.&p=564649#post564649)) that IE leaks listeners when a container is destroyed. The solution was to use 'mon' instead of 'on' to create a single, delegated listener; is IE leaking in this code sample -- why or why not?

I assume this doesn't leak because we're not using an Ext.Container as evidenced by the Ext.get call? I'm just curious and trying to solve my own horrendous IE issues.

Thanks, AC, I appreciate your posts.

@OP:

// IE
el.onfocusin = handleEvent;
el.onfocusout = handleEvent;
(Stolen from quirksmode) looks like the events you want to try to hook. GL.