Question

这是我的代码，它基于MDN提供的example：

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不在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); };的情况下调度该事件。

示例： http://jsfiddle.net/nhsN4/1/

{{1}}

Answer 2

可能代码的顺序错误，似乎dispatchEvent会触发事件，因此必须在addEventListener调用之后。

为什么我的自定义DOM事件无法到达我的事件监听器？

2 个答案: