jQuery beberapa peristiwa untuk memicu fungsi yang sama

Apakah ada cara untuk memiliki keyup, keypress, blur, dan changeperistiwa memanggil fungsi yang sama dalam satu baris atau yang harus saya lakukan secara terpisah?

Masalah yang saya miliki adalah bahwa saya perlu memvalidasi beberapa data dengan pencarian db dan ingin memastikan validasi tidak dilewatkan dalam hal apa pun, apakah itu diketik atau disisipkan ke dalam kotak.

Anda dapat menggunakan .on()untuk mengikat fungsi ke beberapa acara:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Atau hanya meneruskan fungsi sebagai parameter ke fungsi acara normal:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

Pada jQuery 1.7, .on()metode ini adalah metode yang disukai untuk melampirkan penangan acara ke dokumen. Untuk versi sebelumnya, .bind()metode ini digunakan untuk melampirkan pengendali acara langsung ke elemen.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

Saya sedang mencari cara untuk mendapatkan jenis acara ketika jQuery mendengarkan beberapa acara sekaligus, dan Google menempatkan saya di sini.

Jadi, bagi mereka yang tertarik, event.typeadalah jawaban saya:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

Info lebih lanjut di dokumen jQuery .

Anda dapat menggunakan metode bind untuk melampirkan fungsi ke beberapa acara. Cukup berikan nama acara dan fungsi penangan seperti dalam kode ini:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Pilihan lain adalah menggunakan dukungan chaining api jquery.

Jika Anda melampirkan pengendali acara yang sama ke beberapa acara, Anda sering mengalami masalah lebih dari satu dari mereka yang menembak sekaligus (misalnya tab pengguna menekan setelah mengedit; keydown, mengubah, dan blur mungkin semua api).

Kedengarannya seperti apa yang sebenarnya Anda inginkan adalah sesuatu seperti ini:

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

Beginilah cara saya melakukannya.

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});

Anda bisa mendefinisikan fungsi yang ingin Anda gunakan kembali seperti di bawah ini:

var foo = function() {...}

Dan nantinya Anda dapat mengatur berapa banyak pendengar acara yang Anda inginkan pada objek Anda untuk memicu fungsi tersebut menggunakan on ('event') meninggalkan ruang di antaranya seperti yang ditunjukkan di bawah ini:

$('#selector').on('keyup keypress blur change paste cut', foo);

Jawaban oleh Tatu adalah bagaimana saya secara intuitif akan melakukannya, tetapi saya telah mengalami beberapa masalah di Internet Explorer dengan cara ini bersarang / mengikat peristiwa, meskipun itu dilakukan melalui .on()metode.

Saya belum bisa menentukan dengan tepat versi jQuery yang mana masalahnya. Tapi kadang-kadang saya melihat masalah di versi berikut:

• 2.0.2
• 1.10.1
• 1.6.4
• Seluler 1.3.0b1
• Seluler 1.4.2
• Seluler 1.2.0

Solusi saya adalah pertama mendefinisikan fungsi,

function myFunction() {
    ...
}

dan kemudian menangani acara secara individual

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

Ini bukan solusi tercantik, tetapi itu bekerja untuk saya, dan saya pikir saya akan menaruhnya di sana untuk membantu orang lain yang mungkin tersandung masalah ini

$("element").on("event1 event2 event..n", function() {
   //execution
});

Tutorial ini adalah tentang menangani beberapa acara.

Apakah ada cara untuk memiliki keyup, keypress, blur, dan changeperistiwa memanggil fungsi yang sama dalam satu baris?

Mungkin menggunakan .on(), yang menerima struktur berikut:, .on( events [, selector ] [, data ], handler )sehingga Anda dapat meneruskan beberapa peristiwa ke metode ini. Dalam kasus Anda, tampilannya akan seperti ini:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

Dan inilah contohnya:

$('#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">

Sangat mudah untuk menerapkan ini dengan metode DOM bawaan tanpa pustaka besar seperti jQuery, jika Anda mau, itu hanya membutuhkan sedikit lebih banyak kode - beralihlah ke array nama acara, dan tambahkan pendengar untuk masing-masing:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});