dispatchEvent not preforming event, but returns true

Question

On MDC's site they have a cool demo of dispatchEvent that works fine in my Chrome 15.

I'm trying to take an event object and pass it into dispatchEvent, and have set up a simple case here where you record events as an array then will replay them.

In essence, I set up a window listener for click, and then perform window.dispatchEvent(recordedEvent).

I'm unable to determine why my event object from the event listener will not preform the same way as the event from initMouseEvent in the MDC example.

I'm not really worried with making it work, I want to know why this doesn't work, when after reading the funny manual it seems to imply it should.

Answer 1

It seems like it works just fine to me; here is an update.

edit — wait - is your concern about the fact that it's returning true as if "preventDefault()" was called? If so then I understand your confusion now.

edit finally OK I think I see the issue. When you're dispatching the event, you always dispatch from window. If instead you keep track of the elements involved, then it works.

Here's the good code that works (for me in Firefox 7):

//Vars for the elements we're working with
var replay = document.getElementById("replay");
var replaying = false;

//Handler to record events into a data array.
var handler = function (e) {
    if (replaying) {
        console.log("replay " + e.type);
    }
    else if (e.target.tagName.toLowerCase() !== 'input') {
        return;
            }
    else {
        handler.data.push({elem: e.target, event: e});
        console.log(handler.data);
    }
};
handler.data = [];

//Listen for the click on the replay button   
replay.addEventListener("click", function(){
    //Remove listeners so we don't create some crazy
    //infinite paradox with turtles all the way down
    // window.removeEventListener("click", handler);
    replaying = true;

    //Clear the textbox out
    var status = [], obj;
    //Dispatch a bunch of stored up events
    for (var i=0; i<handler.data.length;i++){
        obj = handler.data[i];
        status.push(obj.elem.dispatchEvent(obj.event));
    }
    console.log(status);
    replaying = false;
});

//Listen for some specific events
//window.addEventListener("keyup", handler);
window.addEventListener("click", handler);

Also note that it's good to avoid saving the "click" events on the "Replay" button itself.