Как JavaScript события DOM обрабатываются непрерывно, даже если они находятся внутри функции

Question

давайте представим сценарий

function clickEventCheck() {

    document.querySelector('#some-id').addEventListener('click', () => {

             console.log("The button is clicked");
      });
}

clickEventCheck();

Теперь я понимаю, что впервые вызывается функция clickEventCheck, и мы можем обработать событие click. Но теперь стек выполнения пуст, так как строка кода обработчика событий, которая находится внутри нашей функции (которая вернулась), по-прежнему выполняется каждый раз, когда мы нажимаем кнопку?

Answer 1

JavaScript делает больше, чем просто выполняет ваш код последовательно, построчно. На заднем плане также работает нечто, называемое событие l oop. Это часто проверяет другой стек на предмет наличия каких-либо других инструкций и запускает их, запуская дополнительные цепочки выполнения, называемые фреймами.

Два приятных свойства этих фреймов в том, что они будут работать так долго, как могут поэтому вам не нужно рассуждать о случайном переключении между ними, и они не блокируются, поэтому, как только кадр не может выполняться дальше, механизм будет искать другой кадр для выполнения из стека. Это также приводит к плавному переключению между кадрами, если вы не выполняете нагрузку на процессор (что обычно не используется для JavaScript).

Практически, что может произойти, это один кадр (кадр A) делает запрос ввода-вывода и предоставляет функцию обратного вызова, когда это происходит. Затем в кадре A заканчивается код для выполнения, и событие l oop выбирает следующий кадр (кадр B) для запуска. В фоновом режиме, когда запрос ввода-вывода завершается, функция обратного вызова будет добавлена ​​в стек, а затем, когда во фрейме B заканчивается код, событие l oop может забрать этот обратный вызов и выполнить его в еще одном фрейме. Тот же процесс может применяться к нажатию кнопки, перемещению мыши или любому асинхронному процессу, который вы можете заставить компьютер выполнять.

Таким образом, большое количество соединений ввода-вывода можно плавно обрабатывать одновременно, и это это большая точка продажи NodeJs.

Многие обратные вызовы могут быстро запутаться, и поэтому существуют также такие понятия, как Promises и asyn c функции, которые являются темами для другого дня.

Answer 2

При вызове функции click слушатель добавляется к элементу с идентификатором some-id. Таким образом, всякий раз, когда вы щелкаете элемент, код внутри функции callback выполняется.

До тех пор, пока прослушиватель click не будет явно удален из элемента i: e элемента с идентификатором some-id, он будет прослушивать click события.

function clickHandler() {
  console.log('The button is clicked');
}

function clickEventCheck() {
  document.querySelector('#some-id').addEventListener('click', clickHandler);
}

clickEventCheck();

document.querySelector('.remove').addEventListener('click', () => {
  document.querySelector('#some-id').removeEventListener('click', clickHandler);
});

<button id="some-id">Click Me</button>

<button class="remove">Remove Click Listener</button>