JavaScript DOM Events List: Lista de eventos do DOM (Document Object Model) em JavaScript
O artigo aborda os eventos do DOM em JavaScript, detalhando como manipular e interagir com elementos HTML por meio desses eventos.
Publicado em 1 de agosto de 2023
Glossário
Eventos do DOM em JavaScript
O JavaScript é uma poderosa linguagem de programação que permite interatividade e dinamismo em páginas web. Uma das principais funcionalidades do JavaScript é a manipulação do DOM (Document Object Model), permitindo a interação com os elementos da página, a partir de eventos.
O que é o DOM (Document Object Model)?
O DOM (Document Object Model), ou Modelo de Objeto de Documento, é uma representação estruturada e hierárquica dos elementos HTML de uma página web. Ele permite que os programadores acessem, modifiquem e atualizem os elementos e seus atributos por meio de linguagens de programação, como JavaScript.
Como lidar com eventos em JavaScript:
Os eventos em JavaScript permitem que os desenvolvedores adicionem interatividade e dinamismo às suas aplicações web. Ao lidar com eventos, é possível definir ações que serão executadas quando um evento específico ocorrer. Isso é fundamental para criar uma experiência do usuário mais envolvente e responsiva.
1. Utilizando atributos HTML
Uma das maneiras mais simples de lidar com eventos é adicionar atributos HTML diretamente aos elementos alvo. Por exemplo, para executar uma função quando um botão é clicado, podemos adicionar o atributo “onclick” ao elemento HTML e atribuir a ele a função desejada. Essa abordagem é útil para interações simples, mas pode se tornar complicada de gerenciar em projetos maiores.
2. Manipulando eventos via JavaScript
Outra forma de lidar com eventos é através da utilização de event listeners em JavaScript. Com os event listeners, é possível registrar uma função que será executada quando um evento específico ocorrer em um determinado elemento. Essa abordagem fornece maior flexibilidade e escalabilidade, pois permite adicionar e remover event listeners de acordo com a necessidade.
3. Delegação de eventos
A delegação de eventos é uma técnica poderosa em JavaScript que permite lidar com eventos em elementos pais, mesmo quando eles são acionados por elementos filhos. Essa abordagem é útil quando você precisa lidar com eventos em elementos dinâmicos ou em elementos que serão adicionados posteriormente à página.
4. Eventos de formulário
No contexto de formulários em JavaScript, podemos lidar com eventos específicos desse tipo de elemento, como “submit” (envio do formulário) ou “input” (quando um valor é alterado em um campo). Esses eventos são muito importantes para a validação de dados, envio, limpeza de campos, entre outras funcionalidades relacionadas a formulários.
5. Prevenção de comportamento padrão
Em algumas situações, é necessário cancelar o comportamento padrão de um evento. Por exemplo, para evitar que um link atualize a página, pode-se utilizar o método preventDefault() do objeto Event. Isso é útil quando é necessário personalizar o comportamento de um evento de acordo com as necessidades específicas de uma aplicação.
Lista de eventos do DOM mais comuns em JavaScript:
Existem vários eventos disponíveis no DOM, que podem ser utilizados para diferentes finalidades em uma aplicação JavaScript. Abaixo, listamos alguns dos eventos do DOM mais comumente utilizados:
- click: ocorre quando um elemento é clicado
- mouseover: ocorre quando o ponteiro do mouse é posicionado sobre um elemento
- keyup: ocorre quando uma tecla é liberada após ser pressionada
- submit: ocorre quando um formulário é enviado
- scroll: ocorre quando o usuário faz uma rolagem na página
- focus: ocorre quando um elemento obtém o foco
- blur: ocorre quando um elemento perde o foco
- load: ocorre quando um elemento ou a página inteira é carregada
- resize: ocorre quando a janela do navegador é redimensionada
- change: ocorre quando o valor de um campo de entrada é alterado
Esses são apenas alguns exemplos de eventos do DOM em JavaScript. É importante destacar que cada evento possui diferentes propriedades e comportamentos. Ao lidar com eventos, é recomendado consultar a documentação oficial para obter informações mais detalhadas sobre cada evento específico.
A Awari é a melhor plataforma para aprender sobre programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Awari e Fluency: A Revolução da Educação Começou
Fluency e Awari estão oficialmente juntas e prometem transformar...
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
