DOM 自定义事件监听器

Question

我认为最好用代码来问这个问题：

var event = new CustomEvent("custom", {bubbles: true}); // Create Event

// Create and attach element
var element = document.createElement("div");
document.body.appendChild(element);

element.addEventListener("custom", function(e) {
    console.log("listening");
});

// At this point I thought that if the "custom" event were fired that my  
// element listing would be triggered with the listener callback.
// But.... 

document.body.dispatchEvent(event);
// check the console... nothing :(

// the only way I am able to get my element event listener to fire is if 
// the element calling the dispatchEvent(event) is the element itself.
element.dispatchEvent(event);

我做错了什么？这是事件的工作方式吗？ 我的问题是如何在未调度事件时收听自定义事件

dispatchEvent(event)

来自包含侦听器回调的元素

element.addEventListener("custom", function(){});

Answer 1

您必须在实际监听它的元素上调度事件，或者如果它应该冒泡，则在链中较低的元素上调度。

你不能在 DIV 上监听事件，然后在 BODY 标签上调度事件，并期望它向下冒泡

element.dispatchEvent(event);

是触发事件的正确方法，它不会从 body 冒泡到 child，事件只会在 DOM 链中向上冒泡。