Цикл не вызывается всегда, но функция для проверки события изменения, вызываемого всегда внутри цикла

Я новичок в JavaScript, у меня есть вопрос, который немного странный для меня ...

Я создал флажки в HTML и хочу определить, когда установлен флажок, поэтому в приведенной ниже функции, когда я открываю браузер, один раз вызывается цикл, но когда я проверяю в любое время checkBox, метод checckbox.onchange = function(e) вызывать всегда, но цикл больше не вызывать, в общем, я думаю, что в программировании, когда внутри цикла есть метод, первый цикл вызывает метод.

checckbox.onchange = function(e) поэтому в этом случае я думаю, что перед вызовом этого метода программа должна вызывать перед циклом, а затем метод как метод внутри цикла, но мой вопрос: почему метод вызывается без цикла?

const checkboxes = document.querySelectorAll('.check-completed')
    for (let i = 0; i < checkboxes.length; i++){

        const checckbox = checkboxes[i];

        console.log('list of checkbox ',checckbox);

        checckbox.onchange = function(e){
            console.log('event', e);


        }

    }

Всего 3 ответа


Что вы сейчас делаете:

  1. Вы перебираете все флажки
  2. Выбор отдельного флажка
  3. Прикрепление прослушивателя событий к каждому флажку.
  4. Это оно. Цикл работы окончен. Цикл никогда не будет выполнен снова.

Теперь, когда вы нажимаете на флажок, он просто вызывает прикрепленный обработчик событий. Теперь, если вы хотите снова запустить цикл, вам нужно добавить цикл for в обработчик событий.

Что-то вроде этого.

checckbox.onchange = function(e) {
  for (let i = 0; i < checkboxes.length; i++) {
    console.log(checkboxes[i].value)
  }
}

const checkboxes = document.querySelectorAll('.check-completed')
for (let i = 0; i < checkboxes.length; i++){

    const checckbox = checkboxes[i];

    console.log('list of checkbox ',checckbox);

    checckbox.onchange = function(e){
        console.log('event', e);


    }

}

когда страница загружается в первый раз, браузер обнаруживает все действия и создает событие для каждой кнопки или флажка. и цикл будет работать только один раз при загрузке


В вашем коде цикл будет выполняться только один раз, потому что JavaScript выполняет код сверху вниз и никогда не выполняет синхронный код более одного раза.

А с другой стороны onchange - это событие, javascript зарегистрировал его как слушатель и прослушал изменения элемента и запустил код для всех изменений.

Браузер создаст прослушиватель событий на флажке, прослушает изменения и выполнит функцию.

Вы можете прочитать больше о событиях здесь


Есть идеи?

10000