jQuery кілька подій, щоб запустити одну і ту ж функцію

Чи є спосіб мати 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 .

Ви можете використовувати метод прив’язки для приєднання функції до кількох подій. Просто передайте назви подій та функцію обробника, як у цьому коді:

$('#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() {...}

А пізніше ви можете встановити, скільки бажаючих слухачів подій на вашому об’єкті запускати цю функцію, використовуючи ("подія"), залишаючи пробіл між ними, як показано нижче:

$('#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);
});