02.12.2024

Adicionando touchstart e click a um elemento: encurtando o código

Resumo Rápido

Se você precisar anexar vários manipuladores de evento a um único elemento HTML, pode usar o método addEventListener() para especificar diferentes tipos de eventos:

var botao = document.querySelector('#botao');

// Quando o botão é clicado, registra "Eureka!" no console
botao.addEventListener('click', function() {console.log('Eureka! Botão clicado!')});

// Muda a cor do botão para verde ao passar o mouse
botao.addEventListener('mouseenter', function() {botao.style.background = 'green'});

// Quando o cursor sai do botão, ele retorna ao seu estado original
botao.addEventListener('mouseleave', function() {botao.style.background = ''});

Neste exemplo, usamos três eventos diferentes — click, mouseenter e mouseleave — para realizar várias ações no mesmo botão.

Conclusão

Para melhorar o desempenho ao lidar com eventos comuns, como click e touchstart, é benéfico usar um único manipulador, o que ajuda a otimizar o código:

const botao = document.querySelector('#botao');

// Quando o botão é clicado ou tocado, registra "Viva!" no console
const manipuladorComum = evento => console.log('Viva! O botão foi clicado ou tocado!');

['click', 'touchstart'].forEach(evento => botao.addEventListener(evento, manipuladorComum));

Essa técnica ajuda a evitar a duplicação de código e garante que o botão responda tanto em desktops quanto em dispositivos móveis.

Visualização

Abordagem Geral para Manipulação de Eventos

Se você precisar lidar com ações que ocorrem em diferentes elementos filhos, pode vincular manipuladores ao elemento pai. Isso elimina a necessidade de adicionar manipuladores a cada elemento filho separadamente:

document.addEventListener('click', (evento) => {
  if (evento.target.classList.contains('botao')) {
    console.log('Evento de botão não controlado tratado.');
  }
});

Gerenciamento Unificado de Eventos

Para simplificar o tratamento de diversos eventos dentro de um único objeto, você pode usar o método handleEvent:

const objetoManipulador = {
  click: function() {
    console.log('Clique registrado em nosso objeto!');
  },
  mouseenter: function() {
    console.log('Mouse entrou no objeto!');
  },
  handleEvent(evento) {
    switch (evento.type) {
      case 'click':
        this.click(evento);
        break;
      case 'mouseenter':
        this.mouseenter(evento);
        break;
    }
  }
};

elemento.addEventListener('click', objetoManipulador);
elemento.addEventListener('mouseenter', objetoManipulador);

Essa abordagem simplifica o código, tornando-o mais escalável e conciso.

Materiais Úteis

Atenção aos Detalhes ao Lidar com Eventos

Esforce-se para não criar manipuladores excessivos para o mesmo evento, a fim de evitar ações repetitivas. Use funções comuns sempre que possível.

Gerenciamento de Memória

Um gerenciamento eficaz de memória implica na remoção oportuna de manipuladores de evento que não são mais necessários, especialmente ao trabalhar com elementos dinâmicos. Isso ajuda a evitar vazamentos de memória.

Hierarquia de Eventos

É importante entender os princípios de bubbling e capturing de eventos, bem como usar o método event.stopPropagation() para restringir sua propagação.

Elemento (🔘):
- **Evento de Clique** 🖱️ => {Função handleClick ☑️}
- **Evento de Hover** 🌟 => {Função handleHover ✨}
- **Evento de Arrastar** 🚚 => {Função handleDrag 🪂}

Um único elemento pode acionar diferentes ações em resposta a vários tipos de eventos.

🔘 **Elementos Funcionais:**

- 🖱️ Clique:     **Aciona** (chama a função)
- 🌟 Hover:     **Destaca** (inicia outra função)
- 🚚 Arrastar:  **Arrasta** (ativa mais uma função)

Técnicas Avançadas para Dominar a Manipulação de Eventos

Trabalhando com Elementos Aninhados

Ao trabalhar com elementos aninhados e usando delegação de eventos, você pode utilizar o método closest para determinar o elemento alvo:

document.addEventListener('click', (evento) => {
  const itemMenu = evento.target.closest('.menu-item');
  if (itemMenu) {
    console.log(`Nome do botão selecionado: ${itemMenu.innerText}. Funciona!`);
  }
});

Mapa de Eventos

Para facilitar a escalabilidade e simplificar a manutenção do código, você pode usar um mapa de eventos e manipuladores correspondentes:

const mapaEventos = new Map([
  ['click', handleMouseClick],
  ['mouseover', handleMouseOver],
]);

for (let [evento, manipulador] of mapaEventos) {
  elemento.addEventListener(evento, manipulador);
}

Estratégias para Melhoria de Desempenho

Utilize as estratégias de throttling e debouncing para melhorar o desempenho e a experiência do usuário, especialmente ao lidar com eventos de alta frequência.

Recursos Úteis

1. EventTarget: método addEventListener() — Web API | MDN
2. Introdução aos Eventos do Navegador — javascript.info
3. Funções — JavaScript | MDN
4. Como Vincular Múltiplos Eventos a um Manipulador (Sem jQuery)? — Stack Overflow
5. Delegação de Eventos — davidwalsh.name
6. Os Perigos de Parar a Propagação de Eventos — CSS-Tricks
7. Referência de Eventos — MDN

Video

Navigation