jQuery.on(): Como vincular manipuladores de eventos

O método jQuery.on(), com sua sintaxe simplificada e consistente, é capaz de vincular manipuladores de eventos a elementos. Por esse motivo, ele é bastante utilizado no desenvolvimento de aplicações web interativas. 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 (manipuladores de eventos) podem ser vinculados a elementos para eventos específicos. No desenvolvimento de aplicações web, ele é usado para reagir a interações de usuários e chamar funções. Por meio do jQuery.on(), você pode definir manipuladores para eventos como cliques, teclas pressionadas, movimentos de mouse, inserções em formulários e outros. Além disso, a delegação de eventos permite vincular manipuladores de eventos a elementos adicionados ou removidos dinamicamente 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 processamento dos eventos podem ser facilmente integrados ao jQuery no WordPress.

Sintaxe e parâmetros 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 manipulador de eventos deve reagir, por exemplo,click,keydown,submit etc.
• childSelector: Seletor CSS opcional, que indica quais elementos subordinados devem ser adicionados ao evento.
• data: Dados adicionais opcionais, a serem transferidos ao manipulador de eventos.
• function: Função a ser executada quando o evento é acionado.
• map: Permite vincular vários eventos e manipuladores de eventos a uma única chamada, por meio de um mapeamento de objetos.

Mais informações sobre notações e funções, você encontra no tutorial de jQuery para iniciantes do nosso Digital Guide.

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

Com o método jQuery.on(), você pode vincular manipuladores de eventos a elementos, para determinar a execução de um código quando esses eventos forem acionados. No exemplo a seguir, ilustramos o processamento de um evento de clique:

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

Nesse código, o manipulador 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 manipulador 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.