# 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()](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/addclass-jquery/)) ou para localizar elementos (com o método [jQuery.find()](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/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](https://www.ionos.com/pt-br/digitalguide/hospedagem/blogs/wordpress-jquery/ "WordPress e jQuery").

Dica O [*webspace*](https://www.ionos.com/hosting/webspace "Get your project online — IONOS") da IONOS oferece pelo menos 10 GB de espaço de armazenamento para os seus projetos web. De quebra, você também leva um certificado SSL Wildcard gratuito, para garantir a segurança das suas comunicações. Os pacotes de espaço web mais econômicos da IONOS custam poucos dólares por mês e garantem uma base sólida para o desenvolvimento de aplicações.

## Sintaxe e parâmetros do método jQuery.on()

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

```jQuery
$(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.

Dica Com a [API da IONOS](https://developer.hosting.ionos.com "IONOS Developer API"), você torna seus fluxos de trabalho mais rápidos e eficientes. A API da IONOS oferece várias opções para a criação e a configuração de recursos, automatizando processos. Isso não só lhe poupará tempo, mas também minimizará as chances de erros.

## 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**:

```jQuery
$('#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.

Dica Com o [Deploy Now](https://www.ionos.com/hosting/deploy-now "Deploy Now – IONOS") da IONOS você coloca o seu site no ar de um jeito eficiente e descomplicado. Graças a URLs de pré-visualização, você poderá executar testes com rapidez. A interface intuitiva da solução, assim como a detecção inteligente de *frameworks*, agilizam ainda mais o processo de configuração.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-on/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-on/) for AI/LLM consumption.