jQuery - привязка нескольких событий к полям ввода

Question

Мне было интересно, достаточно ли привязки одного события change() к полям формы, чтобы правильно выполнить действие при изменении значения поля.

Или я должен связать все возможные события? как это:

    $(this).bind('change keyup focus click keydown', function(){
       // ...
    }).change();

Кроме того, влияет ли привязка нескольких событий на производительность?

Answer 1

change срабатывает только тогда, когда поле теряет фокус (для большинства входов).Если вы хотите что-то более реалистичное, используйте событие HTML 5 oninput.Это в значительной степени поймает любой тип изменения значения для входного элемента (и это тоже пузырится!).Хотя он не поддерживается в Internet Explorer 8 и ниже, но я написал плагин , который отображается на onpropertychange для этих браузеров.

См. Также:

• Эффективное обнаружение пользовательского ввода в JavaScript

С точки зрения производительности, каждое описанное вами событие запускается в разное время, поэтому производительность не должна быть проблемой, если только

Answer 2

Вам достаточно только прослушать change событие (см. Также @ ответ Энди Е ). Из документации :

Событие change отправляется элементу при изменении его значения. Это событие ограничено <input> элементами, <textarea> ящиками и <select> элементами. Для полей выбора, флажков и переключателей событие вызывается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не потеряет фокус.

Answer 3

Проблема, возникающая при этом:

$(this).bind('change keyup focus click keydown', function(e) { // ...

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

switch(e.type) {
    case 'change': {
        break;
    }
    case 'focus': {
        break;
    }
    // ...
}

Я бы просто связалchange событие, если вам этого достаточно.Вы получаете много неприятностей, когда делаете вещи на всех этих событиях, потому что click срабатывает до change, focus после click и т. Д. И т. Д. И т. Д. Это мешает понять и действовать правильно.

Answer 4

Каждое событие происходит в разное время. Там могут быть некоторые совпадения, однако в зависимости от того, что вы делаете, они могут сильно отличаться. Например, событие keyup происходит после того, как значение уже обновлено на input. В то время как keydown происходит раньше. Это может позволить вам остановить ввод значения в текстовое поле.

Что касается производительности, в этом примере вы запускаете код для пяти различных событий. По сравнению с одним событием. По крайней мере, ваш код должен различать совпадения между событиями.

Answer 5

Я думаю, что нет снижения производительности, если вы не делаете что-то очень медленное в обработчике.