jQuery vários events para acionar a mesma function

Existe uma maneira de ter os events keyup , keypress , blur e change chamando a mesma function em uma linha ou eu tenho que fazê-los separadamente?

O problema que tenho é que eu preciso validar alguns dados com uma pesquisa de database e gostaria de garantir que a validação não seja perdida em nenhum caso, seja typescript ou colado na checkbox.

Você pode usar .on() para ligar uma function a vários events:

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

Ou apenas passe a function como o parâmetro para as funções normais do evento:

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

A partir do jQuery 1.7, o método .on() é o método preferido para append manipuladores de events a um documento. Para versões anteriores, o método .bind() é usado para append um manipulador de events diretamente aos elementos.

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

Eu estava procurando uma maneira de obter o tipo de evento quando o jQuery escuta vários events de uma só vez, e o Google me colocou aqui.

Então, para os interessados, event.type é minha resposta:

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

Mais informações no doc jQuery .

Você pode usar o método bind para append a function a vários events. Basta passar os nomes dos events e a function do manipulador como neste código:

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

Outra opção é usar o suporte ao encadeamento de jquery api.

Se você append o mesmo manipulador de events a vários events, muitas vezes você encontrará mais de um deles triggersndo de uma só vez (por exemplo, o usuário pressiona a guia após a edição; o pressionamento de tecla, a alteração e o desfoque podem ser acionados).

Parece que o que você realmente quer é algo assim:

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

Você pode definir a function que você gostaria de reutilizar como abaixo:

 var foo = function() {...} 

E mais tarde você pode definir quantos ouvintes de events você quiser em seu object para acionar essa function usando on (‘event’) deixando um espaço no meio como mostrado abaixo:

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

É assim que eu faço.

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

A resposta de Tatu é como eu intuitivamente faria isso, mas experimentei alguns problemas no Internet Explorer com essa forma de aninhamento / binding dos events, mesmo que isso seja feito por meio do método .on() .

Eu não fui capaz de identificar exatamente quais versões do jQuery este é o problema. Mas às vezes vejo o problema nas seguintes versões:

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Mobile 1.3.0b1
  • Mobile 1.4.2
  • Mobile 1.2.0

Minha solução alternativa foi definir primeiro a function,

 function myFunction() { ... } 

e depois manipular os events individualmente

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

Esta não é a solução mais bonita, mas funciona para mim, e eu pensei em colocá-la para ajudar os outros que possam se deparar com essa questão.

“Existe uma maneira de ter os events keyup , keypress , blur e change chamando a mesma function em uma linha?”

É possível usar .on() , que aceita a seguinte estrutura: .on( events [, selector ] [, data ], handler ) , para que você possa passar vários events para este método. No seu caso, deve ficar assim:

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

E aqui está o exemplo ao 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 é sobre como manipular vários events.