Почему запуск определенного события с помощью диспетчера отправки не подчиняется барбинг-поведению событий?

Я запутался с script ниже:

var event = new Event('shazam');

document.body.addEventListener('shazam',function(){
    alert('body');
});

document.addEventListener('shazam',function(){
    alert('document');
});

window.addEventListener('shazam',function(){
    alert('window');
});

document.body.dispatchEvent(event);

Когда я запускаю этот script в своем браузере, я просто получаю событие alert ('body');. но если я установил параметр захвата addEventListener (третий необязательный параметр) в значение true, все предупреждения будут сняты, чтобы они были.

Почему событие shazam не пузырится?

Ответы

Ответ 1

Вам нужно установить для свойства bubbles значение true, и вы должны сделать это во время построения:

var event = new Event('shazam', { bubbles: true });

или старый способ с initEvent, передавая true в качестве второго аргумента, чтобы разрешить пузырь:

event.initEvent('shazam', true);

MDN Док