Нажмите vs Input против Change для флажков? - PullRequest
0 голосов
/ 19 сентября 2019

У меня есть форма.Я хочу разрешить отправку формы только в том случае, если пользователь установит 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 события, которые дублируют функциональность друг друга?Имеет ли какое-либо значение какое событие я использую?

Или я что-то упускаю?

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

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

Например, если вы возьмете текстовое поле

  • Событие input будет срабатывать всякий раз, когда текст в элементе изменяется с помощью пользовательского интерфейса.
  • Событие change будет срабатывать (в большинстве браузеров) всякий раз, когда текстовый элемент теряет фокус.Он будет срабатывать только один раз, а не после каждого нажатия клавиши.
  • Событие click будет срабатывать всякий раз, когда пользователь нажимает на текстовое поле.

Если бы мы применили это к флажкам (помните, что флажок можно изменить только на одну вещь: checked => unchecked или unchecked => checked)

  • Событие input будет срабатывать всякий раз, когда проверяемое состояние изменяется с помощью пользовательского интерфейса.
  • Событие change будет срабатывать всякий раз, когда проверяемое состояние изменяется в элементе (или когда флажок теряет фокусв IE) .
  • Событие click сработает после завершения изменения состояния проверки.

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

Я бы использовал click, чтобы избежать проблем с пользователем различных браузеров.

1 голос
/ 19 сентября 2019

Они не дублируются.Есть небольшие различия.

change происходит, когда значение или состояние изменяется, и элемент теряет фокус.

$('input').on('change', function(){
  console.log('changed');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1">
<input type="text">

click происходит после нажатия элемента.

input происходит НЕМЕДЛЕННО после изменения значения или состояния, прежде чем он теряет фокус,Это происходит независимо от того, изменяется ли состояние в соответствии с событием мыши или клавиатуры.Флажок может изменить состояние, щелкнув по нему или сфокусировавшись на нем и нажав пробел.Событие click не будет перехватывать изменение состояния пробела.

$('input').on('change', function(){
  console.log('changed');
});

$('input').on('input', function(){
  console.log('input');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1">
<input type="text">

Чтобы проверить отсутствие изменения фокуса и изменения пробела на флажке, вы можете щелкнуть поле ввода, а затем сдвинуть + вкладку, чтобы сфокусировать флажок, чтобы нажатьпробел.Из скрипки видно, что для флажков события изменения и ввода происходят каждый раз, когда изменяются, даже без потери фокуса.

Это отличается от того, как ведет себя текстовое поле.Так что, похоже, существуют некоторые поведенческие различия между двумя элементами в том, когда генерируются события.Флажки, по-видимому, следуют менее строгой реализации шаблона, в отличие от полей ввода.

...