DOM CustomEvent слушатели

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);

Является ли правильный способ инициировать событие, оно не будет пузыриться от тела к ребенку, события будут пузыриться только вверх по цепочке DOM.