Все ли события в javascript захватывают и всплывают?

Я работаю над проектом, в котором привязываю один eventListener к <audio> элемент для play событие и другой eventListener к его родительскому элементу для того же события. Я заметил, что обратный вызов ребенка всегда вызывается, но обратный вызов родителя никогда не вызывается.

Если я использую режим захвата addEventListener(), тогда оба колбэка вызываются нормально - сначала родительский, потом дочерний.

Для дальнейшего изучения я написал фрагмент кода и обнаружил, что событие play не возвращается к родителю.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div><audio src="song.mp3" controls="true"></audio></div>
</body>
<script type="text/javascript">
    parent = document.querySelector('div');
    child = document.querySelector('div audio');

    parent.addEventListener('click', function() {console.log('parent-click-capture');}, true);
    parent.addEventListener('click', function() {console.log('parent-click-bubble');}, false);
    parent.addEventListener('play', function() {console.log('parent-play-capture');}, true);
    parent.addEventListener('play', function() {console.log('parent-play-bubble');}, false);

    child.addEventListener('click', function() {console.log('child-click-capture');}, true);
    child.addEventListener('click', function() {console.log('child-click-bubble');}, false);
    child.addEventListener('play', function() {console.log('child-play-capture');}, true);
    child.addEventListener('play', function() {console.log('child-play-bubble');}, false);
</script>
</html>

И это был выход

parent-click-capture
child-click-capture
child-click-bubble
parent-click-bubble
parent-play-capture
child-play-capture
child-play-bubble

Кто-нибудь знает, относится ли это поведение только к игровому событию или есть другие события, которые не входят в пузырьковую фазу (или фазу захвата)?

Источник

1 ответ

Все события JS входят в capture фаза.

Входит ли событие в bubble фазу можно проверить, прочитав событие bubbles собственность

element.addEventListener('ACTION', (e) => console.log(e.bubbles))
Источник
Другие вопросы по тегам