javascript - 为什么我的自定义 DOM 事件没有到达我的事件监听器？

Question

这是我的代码，它基于 example 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

@Pablo Fernandez就在his answer关于顺序，但另一个组成部分是您的元素需要在 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);
};