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.