Добавить обработчик событий и сразу вызвать

Question

В веб-приложении, использующем jQuery, у меня есть следующий код:

$("input[type=checkbox]").on("click", function (event) {
    let isChecked = event.currentTarget.checked;
    // Do something
});

Это будет делать что-то, когда пользователь нажимает на флажок.

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

Как я могу просто вызвать добавленный обработчик событий для всех совпадающих элементов, фактически не вызывая событие? В случае «щелчка» это изменило бы состояние флажка, что повредило бы данные.

Мой текущий обходной путь такой:

$("input[type=checkbox]")
    .on("click change", function (event) {
        let isChecked = event.currentTarget.checked;
        // Do something
    })
    .change();

Это добавляет обработчик событий для нескольких событий и запускает только тот, который не имеет побочных эффектов. Но я бы хотел ограничить обработчики событий тем, что действительно необходимо. Если для элемента можно использовать только событие «щелкнуть», альтернативы нет. Также, в моем случае, только элементы скрыты или показаны, но если что-то случится, это может произойти дважды.

Я ищу функцию onAndNow в этом примере псевдокода:

$("input[type=checkbox]").onAndNow("click", function (event) {
    let isChecked = event.currentTarget.checked;
    // Do something
});

Это еще одно не очень приятное и неполное решение:

function onCheckboxClicked(event) {
    let isChecked = event.currentTarget.checked;
    // Do something
}
$("input[type=checkbox]").on("click", onCheckboxClicked);
onCheckboxClicked(???);

Answer 1

Вы можете запустить функцию на каждом из элементов, используя этот код:

function onCheckboxClicked(event) {
    if (event == 0) {
      console.log("onload")
    } else {
      console.log("event")
      // Do something
    }
    
    console.log($(this).prop('checked'))

}

// Event driven
$("input[type=checkbox]").on("click", onCheckboxClicked);

// Executed on load
$("input[type=checkbox]").each(onCheckboxClicked);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />

Примечание. Как видите, вы не сможете передать событие с нагрузкой, поэтому вам придется написать код длякаждая ситуация.Однако вы можете получить доступ к элементу с помощью $(this).