25.12.2024

JavaScript: Ativando Abas ao Clicar com onclick()

Resposta Rápida

Para passar um elemento para uma função quando o evento onclick é acionado e atribuir a ele uma classe, você pode usar a palavra-chave this. Dentro da função, utilize o método element.classList.add('nome-da-classe') para atingir esse objetivo:

<button onclick="destacar(this);">Clique em mim</button>

<script>
function destacar(element) {
    element.classList.add('ativo');
}
</script>

Quando o botão é clicado, a função destacar é acionada, passando o elemento atual (this), que então recebe a classe 'ativo'.

Interagindo com Múltiplos Elementos

Se você tem múltiplos objetos interativos, como abas ou itens de menu, e deseja ativar o elemento clicado, você pode implementá-lo assim:

<ul>
  <li onclick="ativar(this)">Aba 1</li>
  <li onclick="ativar(this)">Aba 2</li>
  <li onclick="ativar(this)">Aba 3</li>
</ul>

<script>
function ativar(aba) {
    // Remove a classe ativa de todas as abas
    document.querySelectorAll('.ativo').forEach(aba => aba.classList.remove('ativo'));
    // Atribui a classe 'ativo' à aba selecionada
    aba.classList.add('ativo');
}
</script>

Essa abordagem permite remover a classe ativa de todas as abas e atribuí-la apenas àquela que foi clicada.

Refinando o Tratamento de Eventos

De Manipuladores Inline para Externos com addEventListener

Usar addEventListener torna o código mais estruturado e fácil de manter:

document.querySelectorAll('.aba').forEach(aba => {
    aba.addEventListener('click', (event) => {
        document.querySelectorAll('.ativo').forEach(aba => aba.classList.remove('ativo'));
        event.target.classList.add('ativo');
    });
});

Usando Atributos data-*

Os atributos data-* simplificam a interação entre elementos ao permitir fácil identificação:

<button data-aba="1" onclick="ativarAba(this)">Aba 1</button>
<button data-aba="2" onclick="ativarAba(this)">Aba 2</button>

<script>
function ativarAba(elemento) {
    document.querySelectorAll('[data-aba]').forEach(aba => aba.classList.remove('ativo'));
    elemento.classList.add('ativo');
}
</script>

Otimizando Eventos com Delegação de Eventos

A delegação de eventos é uma ótima maneira de gerenciar muitos elementos e aqueles adicionados dinamicamente:

document.addEventListener('click', (event) => {
    if (event.target.matches('.aba')) {
        definirAbaAtiva(event.target);
    }
});

function definirAbaAtiva(aba) {
    aba.classList.add('ativo');
}

Visualização

Como exemplo, vamos assumir que o HTML representa a iluminação do palco em um show e você deseja destacar o performer:

<button onclick="destacar(this)">Baterista!</button>

Quando você clica no botão, a função destacar ativa o holofote para o performer:

function destacar(elemento) {
    elemento.classList.add('holofote');
}

Visualização:

Antes de clicar:     🥁
Depois de clicar:   💡🥁 // Agora o baterista está sob os holofotes!

Cada clique troca o holofote para uma nova estrela do show. Vamos começar o espetáculo!

Problemas Potenciais e Melhores Práticas

Controle seu this

É importante lembrar que, ao usar this em um manipulador de eventos inline, ele se refere ao elemento que disparou o evento.

Cuidado com a Sintaxe

Preste atenção a erros de digitação e erros de sintaxe que podem prejudicar o funcionamento adequado do seu código.

Pare de Usar jQuery

Em situações em que cada milissegundo conta, é mais racional usar JavaScript "puro" em vez de jQuery.

Direcionamento Correto

Certifique-se de que você está atribuindo classes no nível correto dos elementos para alcançar o efeito visual desejado.

Recursos Úteis

1. Objeto Evento DOM HTML — Guia sobre o objeto de evento HTML.
2. Elemento: propriedade classList - Web APIs | MDN — Descrição da API classList.
3. EventTarget: método addEventListener() - Web APIs | MDN — Visão geral detalhada do método addEventListener().
4. Introdução aos eventos do navegador — Introdução aos eventos do navegador em JavaScript.
5. JavaScript DOM EventListener — Usando ouvintes de eventos DOM.
6. Os passos finais para dominar a palavra-chave "this" do JavaScript — SitePoint — Visão geral da palavra 'this' em JavaScript.

Video

Navigation