Почему мое пользовательское событие DOM не достигает моего слушателя?

Question

Вот мой код, он основан на примере , предоставленном в 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);
}

Когда я запускаю это, ничего не происходит, указывая, что что-то пошло не так при создании, отправке или отлове события. Буду признателен за любую помощь в понимании, где я иду не так.

Answer 1

@ Пабло Фернандес прав в своем ответе о заказе, но другой компонент заключается в том, что ваш элемент должен быть в DOM.

Причина в том, чточто вы делаете событие всплывающим событием и присоединяете обработчик к document.Ну, чтобы событие всплыло до document, элемент, из которого он поднимается, должен быть в пределах document.

Пример: 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);
};

---

Если вы добавили обработчик непосредственно в созданный вами element, вы можете отправить событие, не находясь в document.

Пример: 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);
};

Answer 2

Может быть, код в неправильном порядке, похоже, что dispatchEvent запускает событие, поэтому оно должно быть после вызова addEventListener.