为什么我的自定义DOM事件没有到达我的事件侦听器

Why does my custom DOM Event not reach my event listener?

本文关键字：我的 事件 侦听器 DOM 为什么 自定义      更新时间：2023-09-26

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

当我运行这个时，什么也没有发生，这表明在事件的创建、发送或捕获过程中出现了错误。

如果你能帮助我理解我在哪里做错了，我将不胜感激。

@Pablo Fernandez关于顺序的回答是正确的，但另一个组件是您的元素需要在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);
};

也许代码顺序错误，似乎dispatchEvent触发事件，所以它必须在addEventListener调用之后。

相关文章：