¿Cómo puedo activar la misma función desde múltiples eventos con jQuery?
¿Hay alguna manera de que keyup
, keypress
, blur
y change
los 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.
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)
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");
})
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.type
está 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 .
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.
¿Hay alguna manera de que
keyup
,keypress
,blur
ychange
los 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">