fireEvent and bubbling

[xrado]

Can some one explain me why fireEvent in this example http://jsbin.com/evavav/3/edit is not propagating to parent body (click on button and watch firebug console), while same example in jQuery http://jsbin.com/uzedaz/3/edit work as expected (at least what I expect). Mootools click logs to console only click, while jQuery click and change.

I having problems catching events on parent elements.

[Sanford Whiteman]

> I having problems catching events on parent elements.

fireEvent in the MooTools context does not result in a native
(non-framework) Event object that bubbles up the tree under the
browser's control.

The theoretical solution is instantiating and dispatching a new native
Event object. However, having worked on a cross-and-old-browser
implementation of this a while back, believe me when I say you
shouldn't go down this road, as you're unlikely to get a stable
result.

Another important thing to bear in mind is in... a certain browser...
even a true Event object of type = 'change' won't bubble from an INPUT
up to the BODY (or if it is sent up, doesn't matter because BODY
doesn't listen for it even though it lets you attach the Event). I'm
talking outside of Moo here.

Anyway, the point is you have to implement the bubbling of fireEvent()
yourself AFAIK.

-- Sandy

[xrado]

What I'm trying to do:

I have a form with datepicker and when I pick a date, datepicker fire change event on the input.
I'd like to catch all change events listening on the form.

[Sanford Whiteman]

> I'd like to catch all change events listening on the form.

They won't bubble there in IE, that's what I was getting at.

You can bubble them yourself by walking up the tree -- something like

this.getParents().each(function(itm,idx){

// fire the event

});

Note if you do it this way, you don't want your synthetic bubbling and
the native bubbling (when available) to collide. So you stop() the
native event, while still using the MooTools event manager to keep the
clarity of parent and child.

http://jsfiddle.net/sanford/tJRxc/6/

You can also use MooTools delegation, which has a built-in workaround
for IE's problem bubbling the 'change' type.

http://jsfiddle.net/tJRxc/8/

With this second delegation mode, you might lose track of things that
are specifically for the parent vs. the child, so it may not be right
for you.

There are some other, better patterns (e.g. observer) for this, to be
sure, but these both solve the core problem.

-- S.

[xrado]

Thx man! you helped me solve the problem