jQuery eventi multipli per attivare la stessa funzione

C'è un modo per avere keyup, keypress, blur, e changegli eventi chiamare la stessa funzione in una riga o devo fare separatamente?

Il problema che ho è che devo convalidare alcuni dati con una ricerca db e vorrei assicurarmi che la convalida non venga persa in ogni caso, sia che venga digitata o incollata nella casella.

È possibile utilizzare .on()per associare una funzione a più eventi:

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

O semplicemente passare la funzione come parametro alle normali funzioni di evento:

var myFunction = function() {
   ...
}

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

A partire da jQuery 1.7, il .on()metodo è il metodo preferito per allegare i gestori di eventi a un documento. Per le versioni precedenti, il .bind()metodo viene utilizzato per collegare un gestore eventi direttamente agli elementi.

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

Stavo cercando un modo per ottenere il tipo di evento quando jQuery ascolta diversi eventi contemporaneamente e Google mi ha messo qui.

Quindi, per chi fosse interessato, event.typeè la mia risposta:

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

Maggiori informazioni nel documento jQuery .

È possibile utilizzare il metodo bind per associare la funzione a diversi eventi. Basta passare i nomi degli eventi e la funzione del gestore come in questo codice:

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

Un'altra opzione è quella di utilizzare il supporto per il concatenamento di jquery api.

Se si collega lo stesso gestore di eventi a più eventi, si verifica spesso il problema di più di uno di essi che si attiva contemporaneamente (ad esempio, l'utente preme la scheda dopo la modifica; il keydown, il cambiamento e la sfocatura potrebbero attivarsi tutti).

Sembra che quello che vuoi davvero sia qualcosa del genere:

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

Questo è come lo faccio.

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

È possibile definire la funzione che si desidera riutilizzare come di seguito:

var foo = function() {...}

E in seguito puoi impostare comunque quanti listener di eventi vuoi sul tuo oggetto per attivare quella funzione usando on ('event') lasciando uno spazio in mezzo come mostrato di seguito:

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

La risposta di Tatu è come lo farei intuitivamente, ma ho riscontrato alcuni problemi in Internet Explorer con questo modo di annidare / associare gli eventi, anche se è stato fatto con il .on()metodo.

Non sono stato in grado di individuare esattamente con quali versioni di jQuery questo è il problema. Ma a volte vedo il problema nelle seguenti versioni:

• 2.0.2
• 1.10.1
• 1.6.4
• Cellulare 1.3.0b1
• Cellulare 1.4.2
• Mobile 1.2.0

La mia soluzione è stata innanzitutto definire la funzione,

function myFunction() {
    ...
}

e quindi gestire gli eventi singolarmente

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

Questa non è la soluzione più carina, ma funziona per me, e ho pensato di metterla lì fuori per aiutare gli altri che potrebbero inciampare in questo problema

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

Questo tutorial riguarda la gestione di più eventi.

C'è un modo per avere keyup, keypress, blur, e changegli eventi chiamare la stessa funzione in una linea?

È possibile utilizzare .on(), che accetta la seguente struttura:, .on( events [, selector ] [, data ], handler )quindi è possibile passare più eventi a questo metodo. Nel tuo caso dovrebbe apparire così:

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

Ed ecco l'esempio dal vivo:

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

È semplice implementarlo con i metodi DOM integrati senza una grande libreria come jQuery, se vuoi, richiede solo un po 'più di codice - iterare su una matrice di nomi di eventi e aggiungere un listener per ciascuno:

function validate() {
  // ...
}

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