рассуждения об использовании Capture в addeventListener? - PullRequest
Новая
       32

рассуждения об использовании Capture в addeventListener?

0 голосов
/ 19 сентября 2018

У меня есть 4 кнопки, каждая из которых воспроизводит свою собственную музыку при нажатии.Мне нужно что-то, что приостанавливает одну музыку, когда нажимается другая кнопка, чтобы у меня не было всех четырех музыкальных композиций, играющих поверх друг друга.Я нашел этот код для его решения: 

document.addEventListener('play', function(event){
var allAudios = document.getElementsByTagName('audio');
debugger;
for(var i = 0; i<allAudios.length; i++){
    if(allAudios[i] != event.target){
        allAudios[i].pause();
    }
}
}, true);

Однако я не понимаю точную цель true в конце.Я понимаю, что это говорит слушателю событий использовать событие захвата, но когда я настраиваю оповещение для родителей цели события, порядок событий запускается от цели события к ее родителям (всплывающее сообщение) и от родителей к цели события (захват).У кого-нибудь есть объяснение этому феномену и почему в этом случае необходимо использовать useCapture?

Я получил код с этого сайта, если кому-то нужна ссылка.

https://teamtreehouse.com/community/auto-stop-when-playing-other-files

Спасибо

1 Ответ

0 голосов
/ 15 января 2019

tl; dr : потому что событие play не всплывает, и вы хотите прослушивать (захватывать) все события воспроизведения, происходящие в document.

useCapture позволяет захватывать события, которые обычно не всплывают.В контексте сценария, на который вы ссылаетесь, вы слушаете событие play.Событие play не всплывает, как другие события, и вы хотите захватить (прослушать) все события play, происходящие в document, поэтому вы включаете useCapture для захвата всех событий play, чтобыВы можете знать, когда нужно приостановить воспроизведение всей другой музыки.

Как узнать, когда вам нужно установить useCapture на true:

  1. Посетите Страница справки о событиях на MDN .
  2. Нажмите на событие, которое вы хотите использовать.
  3. В разделе «Общая информация» вверху найдите, установлены ли «пузыри» на"yes" или "no".

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

Источник: https://gomakethings.com/when-to-use-use-capture-in-your-event-listeners/

Редактировать Подробнее о том, как useCapture работает: Невозможно понять параметр useCapture в addEventListener

...