jQuery.on(): Como vincular ma­ni­pu­la­do­res de eventos

O método jQuery.on(), com sua sintaxe sim­pli­fi­cada e con­sis­tente, é capaz de vincular ma­ni­pu­la­do­res de eventos a elementos. Por esse motivo, ele é bastante utilizado no de­sen­vol­vi­mento de apli­ca­ções web in­te­ra­ti­vas. Conheça a sintaxe e alguns exemplos práticos que ilustram como aplicar a função.

O que é jQuery.on()?

Com o método jQuery.on(), event handlers (ma­ni­pu­la­do­res de eventos) podem ser vin­cu­la­dos a elementos para eventos es­pe­cí­fi­cos. No de­sen­vol­vi­mento de apli­ca­ções web, ele é usado para reagir a in­te­ra­ções de usuários e chamar funções. Por meio do jQuery.on(), você pode definir ma­ni­pu­la­do­res para eventos como cliques, teclas pres­si­o­na­das, mo­vi­men­tos de mouse, inserções em for­mu­lá­rios e outros. Além disso, a delegação de eventos permite vincular ma­ni­pu­la­do­res de eventos a elementos adi­ci­o­na­dos ou removidos di­na­mi­ca­mente durante a execução de uma página. O código a ser executado para o evento pode ser, por exemplo, para adicionar uma classe (com o método jQuery.addClass()) ou para localizar elementos (com o método jQuery.find()). Você também pode executar iterações com a função de loop jQuery.each() no bloco de funções. Ainda, métodos para o pro­ces­sa­mento dos eventos podem ser fa­cil­mente in­te­gra­dos ao jQuery no WordPress.

Sintaxe e pa­râ­me­tros do método jQuery.on()

Esta é a sintaxe básica do método jQuery.on():

$(selector).on(event, childSelector, data, function, map)

• event: Nome do evento ao qual o ma­ni­pu­la­dor de eventos deve reagir, por exemplo,click,keydown,submit etc.
• child­Se­lec­tor: Seletor CSS opcional, que indica quais elementos su­bor­di­na­dos devem ser adi­ci­o­na­dos ao evento.
• data: Dados adi­ci­o­nais opcionais, a serem trans­fe­ri­dos ao ma­ni­pu­la­dor de eventos.
• function: Função a ser executada quando o evento é acionado.
• map: Permite vincular vários eventos e ma­ni­pu­la­do­res de eventos a uma única chamada, por meio de um ma­pe­a­mento de objetos.

Mais in­for­ma­ções sobre notações e funções, você encontra no tutorial de jQuery para ini­ci­an­tes do nosso Digital Guide.

Exemplo de uso do método jQuery.on()

Com o método jQuery.on(), você pode vincular ma­ni­pu­la­do­res de eventos a elementos, para de­ter­mi­nar a execução de um código quando esses eventos forem acionados. No exemplo a seguir, ilus­tra­mos o pro­ces­sa­mento de um evento de clique:

$('#myButton').on('click', function() {
    console.log('O botão foi clicado!');
});

Nesse código, o ma­ni­pu­la­dor de eventos para o evento de clique foi vinculado ao elemento de botão com o ID myButton. Quando o botão é clicado, a função do ma­ni­pu­la­dor de eventos é executada e a mensagem “O botão foi clicado!” é exibida no console. Ao fazer uso do jQuery.on(), você também será capaz de processar outros eventos, como mouseover, keydown e submit, além de poder definir funções para cada evento.