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

mouse events jquery

Question

¿Hay alguna forma de que los keyup keypress , keypress , blur y change 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 de db 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.

Answer 1

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

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

Answer 2

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);
    },
});

Answer 3

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 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 jQuery .

Answer 4

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

No he podido identificar exactamente con qué versiones de jQuery está 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 a mí me funciona, y pensé que la pondría para ayudar a otros que podrían encontrar este problema.

Answer 5

Puede definir la función que desea reutilizar de la siguiente manera:

var foo = function() {...}

Y más tarde, puede establecer la cantidad de escuchas de eventos que desee en su objeto para activar esa función usando on (''evento'') dejando un espacio intermedio como se muestra a continuación:

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

Answer 6

Puede utilizar el método de enlace para adjuntar la función 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.

Answer 7

Puedes 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 parámetro a las funciones de eventos normales:

var myFunction = function() {
   ...
}

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

Answer 8

Si adjunta el mismo controlador de eventos a varios eventos, a menudo se encuentra con el problema de que más de uno de ellos se dispara a la vez (p. Ej., El usuario presiona la pestaña después de editar; es posible que se activen los cambios de teclado, cambio y desenfoque).

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.
});

Answer 9

"¿Hay alguna manera de que los keyup keypress , keypress , blur y change llamen a la misma función en una línea?"

Es posible usar .on() , que acepta la siguiente estructura: .on( events [, selector ] [, data ], handler ) , para que pueda pasar varios 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">

Answer 10

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

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