"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como lidar com ouvintes de eventos para elementos criados dinamicamente sem jQuery?

Como lidar com ouvintes de eventos para elementos criados dinamicamente sem jQuery?

Publicado em 2024-11-12
Navegar:163

How to Handle Event Listeners for Dynamically Created Elements Without jQuery?

Event Listener para elementos criados dinamicamente

Para adicionar ouvintes de eventos a elementos gerados dinamicamente sem jQuery, você pode empregar delegação de eventos. Veja como:

Use a delegação de eventos
A propriedade target do objeto de evento permite identificar em qual elemento o evento ocorreu. Usando isso, você pode vincular um ouvinte de evento a um elemento pai e verificar o elemento de destino para responder a critérios específicos. Por exemplo:

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Do your action on the newly created 'li'
  }
});

Neste exemplo, o ouvinte de evento está vinculado ao corpo e, quando ocorre um clique em qualquer elemento filho, o código verifica se é um 'li'. Nesse caso, a ação especificada será executada.

Advertências
Observe que essa abordagem funciona bem com navegadores modernos que suportam o mecanismo de delegação de eventos. Para versões mais antigas do IE, pode ser necessário implementar um manipulador de eventos personalizado usando attachmentEvent.

Declaração de lançamento Este artigo foi reimpresso em: 1729566794 Se houver alguma violação, entre em contato com [email protected] para excluí-lo
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3