Eventos em jQuery: Capturando e Gerenciando Ações do Usuário

O Que São Eventos no jQuery?

Eventos no jQuery são ações ou ocorrências que acontecem na página, como:

• Um clique em um botão.
• A movimentação do mouse sobre um elemento.
• A entrada de texto em um campo.
• O carregamento da página.

Com jQuery, é fácil “escutar” por esses eventos e reagir a eles executando funções.

Principais Métodos de Eventos no jQuery

1. .on()

O método .on() é o mais versátil para anexar eventos. Ele substitui métodos como .click(), .hover() e .keypress().

$('#button').on('click', function() {
    alert('Botão clicado!');
});

2. .off()

Remove um evento previamente adicionado com .on().

$('#button').off('click');

3. .trigger()

Dispara manualmente um evento.

$('#button').trigger('click');

Eventos Comuns no jQuery

1. Eventos de Mouse

• Clique (click)

$('button').click(function() {
    console.log('Botão clicado!');
});

• Duplo Clique (dblclick)

$('button').dblclick(function() {
    console.log('Duplo clique detectado!');
});

• Mouse Sobre (mouseenter) e Mouse Fora (mouseleave)

$('#elemento').mouseenter(function() {
    $(this).css('background-color', 'yellow');
}).mouseleave(function() {
    $(this).css('background-color', 'white');
});

2. Eventos de Teclado

• Tecla Pressionada (keydown)

$(document).keydown(function(event) {
    console.log('Tecla pressionada: ' + event.key);
});

• Tecla Liberada (keyup)

$(document).keyup(function(event) {
    console.log('Tecla liberada: ' + event.key);
});

3. Eventos de Formulário

• Mudança (change)

$('select').change(function() {
    alert('Opção selecionada: ' + $(this).val());
});

• Envio de Formulário (submit)

$('form').submit(function(event) {
    event.preventDefault();
    alert('Formulário enviado!');
});

4. Eventos de Janela

• Carregamento da Página (ready)

$(document).ready(function() {
    console.log('Página carregada!');
});

• Redimensionamento da Janela (resize)

$(window).resize(function() {
    console.log('Janela redimensionada!');
});

Delegação de Eventos

A delegação de eventos é útil quando você precisa lidar com elementos que são adicionados dinamicamente ao DOM.

$('ul').on('click', 'li', function() {
    alert('Item clicado: ' + $(this).text());
});

Nesse exemplo, o evento de clique é associado ao ul, mas é delegado aos seus itens li.

Exemplo Prático

Vamos criar um exemplo de interatividade onde o usuário pode adicionar itens a uma lista, e cada item terá funcionalidade de remoção:

<ul id="item-list"></ul>
<input type="text" id="item-input" placeholder="Digite um item">
<button id="add-item">Adicionar Item</button>

<script>
$(document).ready(function() {
    $('#add-item').on('click', function() {
        const item = $('#item-input').val();
        if (item) {
            $('#item-list').append(`<li>${item} <button class="remove">Remover</button></li>`);
            $('#item-input').val('');
        }
    });

    $('#item-list').on('click', '.remove', function() {
        $(this).parent().remove();
    });
});
</script>

Boas Práticas com Eventos no jQuery

• Evite Eventos Repetidos: Certifique-se de que um evento não seja anexado várias vezes ao mesmo elemento.
• Use .on() Para Delegação: Isso garante que novos elementos sejam afetados sem a necessidade de adicionar eventos manualmente.
• Minimize Manipulações do DOM: Sempre que possível, combine várias alterações em uma só operação para melhorar a performance.

Conclusão

Eventos são uma parte essencial de qualquer site interativo, e o jQuery facilita enormemente seu gerenciamento. Ao entender como capturar e manipular eventos, você pode criar experiências de usuário mais ricas e dinâmicas.

Agora que você domina os eventos no jQuery, experimente usá-los em seus próprios projetos e veja como isso pode transformar a experiência do usuário!

O Autor

Luiz Möeller

Luiz Möeller, graduado em Sistemas de Informação pela Anhembi Morumbi, atuo na LCM Sistemas como Desenvolvedor de Software, UI/UX Designer, Redator, Tradutor e Especialista SEO. Com experiência prévia em design gráfico/digital, gestão de tráfego, mídias sociais, edição de vídeo e tecnologia, hoje dedico-me à criação de posts e tutoriais para o blog da LCM Websites. Apaixonado por Desenvolvimento Web, com habilidades em HTML, CSS, JQuery, JavaScript, PHP, API Rest, MySQL, React.js, Kotlin e Java.
Valorizo momentos com a família, amigos e adoro explorar conteúdos variados na Wikipédia nas horas vagas.

See author's posts