jQuery несколько событий для запуска одной и той же функции
-
22-09-2019 - |
Вопрос
Есть ли способ иметь keyup
, keypress
, blur
, и change
события вызывают одну и ту же функцию в одной строке или я должен выполнять их отдельно?
Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно проверить некоторые данные с помощью поиска по базе данных, и я хотел бы убедиться, что проверка не пропущена ни в коем случае, независимо от того, введена она или вставлена в поле.
Решение
Вы можете использовать .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 ( документ jQuery).
Вы можете использовать метод привязки прикрепить функцию к нескольким событиям.Просто передайте имена событий и функцию-обработчик, как в этом коде:
$('#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's 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.
});
Вот как я это делаю.
$("input[name='title']").on({
"change keyup": function(e) {
var slug = $(this).val().split(" ").join("-").toLowerCase();
$("input[name='slug']").val(slug);
},
});
Вы могли бы определить функцию, которую вы хотели бы повторно использовать, как показано ниже:
var foo = function() {...}
И позже вы можете установить на своем объекте любое количество прослушивателей событий, которое вы хотите, для запуска этой функции, используя on('событие'), оставляя пробел между ними, как показано ниже:
$('#selector').on('keyup keypress blur change paste cut', foo);
Ответ Тату заключается в том, как я бы интуитивно это сделал, но у меня возникли некоторые проблемы в Internet Explorer с этим способом вложения / привязки событий, даже если это делается через .on()
способ.
Я не смог точно определить, с какими версиями jQuery связана эта проблема.Но иногда я вижу проблему в следующих версиях:
- 2.0.2
- 1.10.1
- 1.6.4
- Мобильный 1.3.0b1
- Мобильный 1.4.2
- Мобильный 1.2.0
Мой обходной путь состоял в том, чтобы сначала определить функцию,
function myFunction() {
...
}
а затем обрабатывайте события по отдельности
// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);
Это не самое красивое решение, но оно работает для меня, и я подумал, что выложу его там, чтобы помочь другим, которые могут наткнуться на эту проблему
$("element").on("event1 event2 event..n", function() {
//execution
});
Этот учебник речь идет об обработке нескольких событий.
"Есть ли способ иметь 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">
Это просто реализовать с помощью встроенных методов DOM без большой библиотеки, такой как jQuery, если хотите, просто потребуется немного больше кода - выполните итерацию по массиву имен событий и добавьте прослушиватель для каждого:
function validate() {
// ...
}
const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
element.addEventListener(eventName, validate);
});