Question

Here’s my code, it’s based off the example provided at MDN:

window.onload = function(){
    var element = document.createElement('div');

    var event = document.createEvent("HTMLEvents");
    event.initEvent("myClick", true, false);

    element.dispatchEvent(event);

    document.addEventListener("myClick", function(){
        alert("myClick event caught");
    }, false);
}

When I run this, nothing happens, indicating something went wrong in the creation, sending or catching of the event. I would appreciate any help in understanding where I am going wrong here.

Answer 1

@Pablo Fernandez is right in his answer about the order, but another component is that your element needs to be in the DOM.

The reason is that you’re making the event a bubbling event, and attaching the handler to the document. Well in order for the event to bubble up to the document, the element it’s bubbling from needs to be within the document.

Example: http://jsfiddle.net/nhsN4/

window.onload = function(){
    var element = document.createElement('div');

        // add element to the DOM
    document.body.appendChild( element );

    var evt = document.createEvent("HTMLEvents");

    evt.initEvent("myClick", true, false);

        // add listener to the document
    document.addEventListener("myClick", function(){
        alert("myClick event caught");
        alert( event.type );
    }, false);

        // dispatch the event on the element, and it bubbles up to the document
    element.dispatchEvent(evt);
};

---

If you had added the handler directly to the element you created, then you could dispatch the event without it being in the document.

Example: http://jsfiddle.net/nhsN4/1/

window.onload = function(){
    var element = document.createElement('div');

    var evt = document.createEvent("HTMLEvents");

    evt.initEvent("myClick", true, false);

    // add listener to the element
    element.addEventListener("myClick", function(){
        alert("myClick event caught");
        alert( event.type );
    }, false);

    element.dispatchEvent(evt);
};