MooTools - Programmatically fired events not worki

Question

Would really appreciate if anyone can help me figure out why I am unable to fire events programmatically when using event delegation in MooTools (from the Element.Delegation class).

There is a parent <div> that has a change listener on some child <input> elements. When the change event is triggered by user actions, the handler on the parent div gets triggered, but when I fire it programmatically with fireEvent on any child input, nothing happens. The basic setup is:

html

<div id="listener">
    <input type="text" id="color" class="color" />
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​

js

$("listener").addEvent("change:relay(.color)", function() {
    alert("changed!!");
});

$("color").fireEvent("change"); // nothing happens

The event handler on the parent div does not get called. Any help is appreciated. Cheers!

---

Related question: Do events triggered with fireEvent bubble at all in the DOM tree? My current hack is to dispatch the event natively which is working (but a hack nonetheless) - http://jsfiddle.net/SZZ3Z/1/

var event = document.createEvent("HTMLEvents")
event.initEvent("change", true);
document.getElementById("color").dispatchEvent(event); // instead of fireEvent

Answer 1

I resolved it this way:

document.addEvents({
    'click:relay(.remove_curso)': function(){
        document.fireEvent('_remove_curso', this);
    },
    '_remove_curso':function( me ){
        console.log( me );
    }.bind( this )
}

Answer 2

this won't work too well 'as is'. the problem with event bubbling (and with programmatic firing of events) is that it may need the event object to be 'real' in order for it to contain event.target that is being matched against the relay string. also, document.id("color").fireEvent() won't work as color itself has no event attached to it.

to get around this, you fake the event on the parent listener by passing an event object that contains the target element like so:

document.id("listener").fireEvent("change", {
    target: document.id("color")
});

view in action: http://www.jsfiddle.net/xZFqp/1/

if you do things like event.stop in your callback function then you need to pass on {target: document.id("color"), stop: Function.from} and so forth for any event methods you may be referencing but the event delegation code is only interested in target for now.