¿Cómo puedo activar la misma función desde múltiples eventos con jQuery?

Resuelto shaneburgess asked hace 14 años • 13 respuestas

¿Hay alguna manera de que keyup, keypress, blury changelos eventos llamen a la misma función en una línea o tengo que hacerlo por separado?

El problema que tengo es que necesito validar algunos datos con una búsqueda en la base de datos y me gustaría asegurarme de que no se pierda la validación en ningún caso, ya sea que se escriba o se pegue en el cuadro.

shaneburgess avatar Mar 29 '10 01:03 shaneburgess
Aceptado

Puede utilizar .on()para vincular una función a múltiples eventos:

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

O simplemente pase la función como parámetro a funciones de eventos normales:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)
Tatu Ulmanen avatar Mar 28 '2010 18:03 Tatu Ulmanen

A partir de jQuery 1.7, el .on()método es el método preferido para adjuntar controladores de eventos a un documento. Para versiones anteriores, el .bind()método se utiliza para adjuntar un controlador de eventos directamente a los elementos.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})
lesyk avatar Nov 14 '2012 08:11 lesyk

Estaba buscando una manera de obtener el tipo de evento cuando jQuery escucha varios eventos a la vez y Google me puso aquí.

Entonces, para aquellos interesados, event.typeestá mi respuesta:

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

Más información en el documento jQuery .

Alain avatar May 14 '2013 22:05 Alain

Puede utilizar el método de vinculación para adjuntar funciones a varios eventos. Simplemente pase los nombres de los eventos y la función del controlador como en este código:

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

Otra opción es utilizar el soporte de encadenamiento de jquery api.

Giorgi avatar Mar 28 '2010 18:03 Giorgi

¿Hay alguna manera de que keyup, keypress, blury changelos eventos llamen a la misma función en una línea?

Es posible usar .on(), que acepta la siguiente estructura: .on( events [, selector ] [, data ], handler ), por lo que puedes pasar múltiples eventos a este método. En tu caso debería verse así:

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

Y aquí está el ejemplo en 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">
Expandir fragmento

P.S. avatar Sep 26 '2017 19:09 P.S.