У меня есть форма.Я хочу разрешить отправку формы только в том случае, если пользователь установит 4 из 8 доступных флажкови как только пользователь установит 4 флажка, я хочу отключить оставшиеся непроверенные.
Должен ли я добавить перехват к событию click
?Или, может быть, событие input
?Или, может быть, событие change
?
Я поражен количеством событий, которые, кажется, дублируют функции друг друга.
Меня также смущает документация.
MDN документация о input
:
Для <input>
элементов с type=checkbox
или type=radio
событие input
должно запускаться всякий раз, когдапользователь переключает элемент управления в соответствии со спецификацией HTML5 .Однако исторически это не всегда было так.Проверьте совместимость или используйте событие change
для элементов этих типов.
MDN документы о change
:
В отличие отinput
событие, событие change
не обязательно вызывается для каждого изменения элемента value
.
и ниже:
В зависимости от видаизменяемый элемент и способ взаимодействия пользователя с элементом, событие change
возникает в другой момент:
- Когда элемент имеет значение
:checked
(при нажатии или использовании клавиатуры) для <input type="radio">
и <input type="checkbox">
;
MDN документы о click
:
Элемент получает событие click
, когдакнопка указательного устройства (например, основная кнопка мыши) одновременно нажимается и отпускается, когда указатель находится внутри элемента.
Практика:
Кажется, что приведенная ниже скрипка JSнамек на то, что все 3 события эквивалентны.Если щелкнуть флажок, щелкнуть метку, сфокусировать флажок и нажать клавишу пробела на клавиатуре, все эти три события запускаются.
const checkbox = document.querySelector('input[type=checkbox]');
for (const event of ['input', 'click', 'change']) {
checkbox.addEventListener(event, () => {
log.textContent = `${event}\n${log.textContent}`
})
}
Согласно документам change
и input
кажутся эквивалентными;click
не кажется эквивалентным другим трем в соответствии с документами, но на практике это кажется эквивалентным.
У нас действительно есть 3 события, которые дублируют функциональность друг друга?Имеет ли какое-либо значение какое событие я использую?
Или я что-то упускаю?