Есть ли способ иметь события keyup
, keypress
, blur
и change
, вызывающие одну и ту же функцию в одной строке или мне нужно делать их отдельно?
Проблема заключается в том, что мне нужно проверить некоторые данные с помощью поиска db и хотелось бы удостовериться, что нет никакой возможности, чтобы проверка была пропущена по погоде, она набрана или вставлена в поле.
Вы можете использовать .on()
для привязки функции к нескольким событиям:
$('#element').on('keyup keypress blur change', function(e) {
// e.type is the type of event fired
});
Или просто передайте функцию как параметр для обычных функций события:
var myFunction = function() {
...
}
$('#element')
.keyup(myFunction)
.keypress(myFunction)
.blur(myFunction)
.change(myFunction)
Как и в jQuery 1.7, метод .on()
является предпочтительным методом для привязки обработчиков событий к документу. Для более ранних версий метод .bind()
используется для привязки обработчика события непосредственно к элементам.
$(document).on('mouseover mouseout',".brand", function () {
$(".star").toggleClass("hovered");
})
Я искал способ получить тип события, когда jQuery прослушивает сразу несколько событий, и Google поместил меня сюда.
Итак, для тех, кого интересует, event.type
- мой ответ:
$('#element').on('keyup keypress blur change', function(event) {
alert(event.type); // keyup OR keypress OR blur OR change
});
Дополнительная информация в jQuery doc.
Вы можете использовать метод привязки для присоединения функции к нескольким событиям. Просто передайте имена событий и функцию обработчика, как в этом коде:
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
Другой вариант - использовать поддержку цепочки jquery api.
Если вы присоединяете один и тот же обработчик событий к нескольким событиям, вы часто сталкиваетесь с проблемой одновременного запуска нескольких из них (например, нажатие на кнопку после редактирования, нажатие клавиши, изменение и размытие может привести к пожару).
Звучит так, как будто вы действительно хотите:
$('#ValidatedInput').keydown(function(evt) {
// If enter is pressed
if (evt.keyCode === 13) {
evt.preventDefault();
// If changes have been made to the input value,
// blur() will result in a change event being fired.
this.blur();
}
});
$('#ValidatedInput').change(function(evt) {
var valueToValidate = this.value;
// Your validation callback/logic here.
});
Вы можете определить функцию, которую вы хотите использовать повторно:
var foo = function() {...}
И позже вы можете установить множество прослушивателей событий, которые вы хотите, чтобы ваш объект вызывал эту функцию, используя on ('event'), оставляя пробел между ними, как показано ниже:
$('#selector').on('keyup keypress blur change paste cut', foo);
Вот как я это делаю.
$("input[name='title']").on({
"change keyup": function(e){
var slug = $(this).val().split(" ").join("-").toLowerCase();
$("input[name='slug']").val(slug);
},
});
Ответ Tatu - это то, как я буду интуитивно делать это, но у меня возникли некоторые проблемы в Internet Explorer с таким способом вложения/привязки событий, хотя это делается через .on()
.
Я не смог точно определить, в каких версиях jQuery это проблема. Но иногда я вижу проблему в следующих версиях:
Мое обходное решение заключалось в том, чтобы сначала определить функцию,
function myFunction() {
...
}
а затем обрабатывать события индивидуально
// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);
Это не самое приятное решение, но оно работает для меня, и я подумал, что я поместил его там, чтобы помочь другим, которые могут наткнуться на эту проблему.
"Есть ли способ иметь keyup
, keypress
, blur
, а события change
вызывать одну и ту же функцию в одной строке?"
Возможно использование .on()
, которое принимает следующую структуру: .on( events [, selector ] [, data ], handler )
, поэтому вы можете передать несколько событий этому методу. В вашем случае это должно выглядеть так:
$('#target').on('keyup keypress blur change', function(e) {
// "e" is an event, you can detect the type of event using "e.type"
});
И вот живой пример:
$('#target').on('keyup keypress blur change', function(e) {
console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">
.on('keyup.foo keypress.foo blur.foo change.foo', …)
или.on('keyup.foo keypress.foo blur.foo change.foo', …)
.on('keyup keypress blur change .foo', …)
?