Последовательность выполнения кода JavaScript, как работают операторы / код вне EventListener?

Question

Я новичок в JavaScript и инструментах отладки Chrome. И мне трудно отладить приведенный ниже код. Я вставил точку останова, чтобы увидеть, как «ключи» нажимают на последний ключ или, другими словами, когда он вызывается, я никогда не вижу остановки контроллера / указателя в строке кода const keys=document.querySelectorAll('.key');. Итак, если контроллер / указатель не останавливается / не достигает этого оператора во время выполнения кода, как он каждый раз выбирает правильный ключ из DOM? Также, то же самое происходит с keys.forEach(, означает, что точка останова не работает, поэтому, если контроллер / указатель не останавливается на этой строке, то как вызывается функция обратного вызова removeTransition?

<div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
</div>


<script>
function removeTransition(e)
    {
      if(e.propertyName!=='transform') return; // skip if this is not a transform
      this.classList.remove('playing');
    }
    const keys=document.querySelectorAll('.key');
    keys.forEach(
       key => key.addEventListener('transitionend',removeTransition)
    );
</script>

Полный код здесь https://jsfiddle.net/speckyfoxabhishek/6kdye3pr/3/

ПРИМЕЧАНИЕ: в приведенной выше ссылке звуковые файлы (.wav) отсутствуют, но это не должно иметь значения, поскольку вопрос связан с последовательностью выполнения.

Answer 1

Вы, вероятно, должны поставить

window.onload = function () { }

Чтобы убедиться, что ваш контент загружен перед поиском элементов DOM. Вот так.

window.onload = function () { 
 const keys=document.querySelectorAll('.key');
    keys.forEach(
       key => key.addEventListener('transitionend',removeTransition)
    );
}

Чтобы ответить на ваш вопрос, чем возможно выполнение сценариев перед загрузкой контента. Это хороший пример https://addyosmani.com/blog/script-priorities/