jQuery múltiples eventos para activar la misma función

Puede usar .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 el parámetro a las funciones de eventos normales:

 var myFunction = function() { ... } $('#element') .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction) 

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

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

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

Entonces, para aquellos interesados, event.type es 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 de jQuery .

Puede usar el método bind para adjuntar función a varios eventos. Solo pase los nombres de los eventos y la función del manejador como en este código:

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

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

Si adjunta el mismo controlador de eventos a varios eventos, a menudo se encuentra con el problema de más de uno de ellos disparando a la vez (por ejemplo, el usuario presiona la pestaña después de la edición, el teclado, el cambio y el desenfoque pueden dispararse).

Parece que lo que realmente quieres es algo como esto:

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

Puede definir la función que le gustaría reutilizar de la siguiente manera:

 var foo = function() {...} 

Y más tarde puede configurar la cantidad de detectores de eventos que desee en su objeto para activar esa función usando on (‘event’) dejando un espacio intermedio como se muestra a continuación:

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

Así es como lo hago.

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

La respuesta de Tatu es cómo lo haría intuitivamente, pero he experimentado algunos problemas en Internet Explorer con esta forma de anidar / vincular los eventos, aunque se realiza a través del método .on() .

No he podido identificar exactamente con qué versiones de jQuery es el problema. Pero a veces veo el problema en las siguientes versiones:

• 2.0.2
• 1.10.1
• 1.6.4
• Mobile 1.3.0b1
• Móvil 1.4.2
• Móvil 1.2.0

Mi solución ha sido definir primero la función,

 function myFunction() { ... } 

y luego manejar los eventos individualmente

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

Esta no es la solución más bonita, pero me sirve, y pensé que la pondría allí para ayudar a otros que podrían tropezar con este problema.

“¿Hay alguna manera de tener keyup , keypress , blur y eventos de change llamar 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 puede 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`) }); 

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

Este tutorial trata sobre el manejo de eventos múltiples.