jQuery múltiples eventos para activar la misma función
-
22-09-2019 - |
Pregunta
¿Hay alguna forma de tener keyup
, keypress
, blur
, y change
Los eventos llaman a la misma función en una línea o tengo que hacerlos por separado?
El problema que tengo es que necesito validar algunos datos con una búsqueda de DB y me gustaría asegurarme de que la validación no se pierda en ningún caso, ya sea que se escriba o pegue en la caja.
Solución
Puedes usar .on()
Para unir 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 las funciones de evento normal:
var myFunction = function() {
...
}
$('#element')
.keyup(myFunction)
.keypress(myFunction)
.blur(myFunction)
.change(myFunction)
Otros consejos
A partir de jQuery 1.7, el .on()
El método es el método preferido para adjuntar los controladores de eventos a un documento. Para versiones anteriores, el .bind()
El método se utiliza para colocar 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 los 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 jQuery doc.
Puedes usar Método de enlace para adjuntar la función a varios eventos. Simplemente pase los nombres de 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.
Si adjunta el mismo manejador de eventos a varios eventos, a menudo se encuentra con el tema de más de uno de ellos disparando a la vez (por ejemplo, la pestaña Presiona el usuario después de editar; Keydown, Change y Blous podría disparar).
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.
});
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);
},
});
Puede definir la función que le gustaría reutilizar como se muestra:
var foo = function() {...}
Y más tarde, puede establecer la cantidad de oyentes de eventos que desee en su objeto que activen esa función usando ('Evento') dejando un espacio en el medio como se muestra a continuación:
$('#selector').on('keyup keypress blur change paste cut', foo);
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, a pesar de que se hace a través del .on()
método.
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
- Móvil 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 funciona para mí, y pensé que la pondría para ayudar a otros que podrían tropezar con este problema.
$("element").on("event1 event2 event..n", function() {
//execution
});
Este tutorial se trata de manejar múltiples eventos.
"¿Hay alguna forma de tener keyup
, keypress
, blur
, y change
¿Los eventos llaman 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 su 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">
Es simple implementar esto con los métodos DOM incorporados sin una gran biblioteca como jQuery, si lo desea, solo toma un poco más de código: iterar sobre una variedad de nombres de eventos y agregar un oyente para cada uno:
function validate() {
// ...
}
const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
element.addEventListener(eventName, validate);
});