{"id":114736,"date":"2023-08-01T13:34:19","date_gmt":"2023-08-01T16:34:19","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/javascript-dom-events-list-lista-de-eventos-do-dom-document-object-model-em-javascript\/"},"modified":"2023-08-01T13:34:19","modified_gmt":"2023-08-01T16:34:19","slug":"javascript-dom-events-list-lista-de-eventos-do-dom-document-object-model-em-javascript","status":"publish","type":"post","link":"https:\/\/fluency.io\/br\/blog\/javascript-dom-events-list-lista-de-eventos-do-dom-document-object-model-em-javascript\/","title":{"rendered":"JavaScript DOM Events List: Lista de eventos do DOM (Document Object Model) em JavaScript"},"content":{"rendered":"

<\/p>\n

Eventos do DOM em JavaScript<\/h1>\n

O JavaScript \u00e9 uma poderosa linguagem de programa\u00e7\u00e3o que permite interatividade e dinamismo em p\u00e1ginas web. Uma das principais funcionalidades do JavaScript \u00e9 a manipula\u00e7\u00e3o do DOM (Document Object Model), permitindo a intera\u00e7\u00e3o com os elementos da p\u00e1gina, a partir de eventos.<\/p>\n

O que \u00e9 o DOM (Document Object Model)?<\/h2>\n

O DOM (Document Object Model), ou Modelo de Objeto de Documento, \u00e9 uma representa\u00e7\u00e3o estruturada e hier\u00e1rquica dos elementos HTML de uma p\u00e1gina web. Ele permite que os programadores acessem, modifiquem e atualizem os elementos e seus atributos por meio de linguagens de programa\u00e7\u00e3o, como JavaScript.<\/p>\n

Como lidar com eventos em JavaScript:<\/h2>\n

Os eventos em JavaScript permitem que os desenvolvedores adicionem interatividade e dinamismo \u00e0s suas aplica\u00e7\u00f5es web. Ao lidar com eventos, \u00e9 poss\u00edvel definir a\u00e7\u00f5es que ser\u00e3o executadas quando um evento espec\u00edfico ocorrer. Isso \u00e9 fundamental para criar uma experi\u00eancia do usu\u00e1rio mais envolvente e responsiva.<\/p>\n

1. Utilizando atributos HTML<\/h3>\n

Uma das maneiras mais simples de lidar com eventos \u00e9 adicionar atributos HTML diretamente aos elementos alvo. Por exemplo, para executar uma fun\u00e7\u00e3o quando um bot\u00e3o \u00e9 clicado, podemos adicionar o atributo “onclick” ao elemento HTML e atribuir a ele a fun\u00e7\u00e3o desejada. Essa abordagem \u00e9 \u00fatil para intera\u00e7\u00f5es simples, mas pode se tornar complicada de gerenciar em projetos maiores.<\/p>\n

2. Manipulando eventos via JavaScript<\/h3>\n

Outra forma de lidar com eventos \u00e9 atrav\u00e9s da utiliza\u00e7\u00e3o de event listeners em JavaScript. Com os event listeners, \u00e9 poss\u00edvel registrar uma fun\u00e7\u00e3o que ser\u00e1 executada quando um evento espec\u00edfico ocorrer em um determinado elemento. Essa abordagem fornece maior flexibilidade e escalabilidade, pois permite adicionar e remover event listeners de acordo com a necessidade.<\/p>\n

3. Delega\u00e7\u00e3o de eventos<\/h3>\n

A delega\u00e7\u00e3o de eventos \u00e9 uma t\u00e9cnica poderosa em JavaScript que permite lidar com eventos em elementos pais, mesmo quando eles s\u00e3o acionados por elementos filhos. Essa abordagem \u00e9 \u00fatil quando voc\u00ea precisa lidar com eventos em elementos din\u00e2micos ou em elementos que ser\u00e3o adicionados posteriormente \u00e0 p\u00e1gina.<\/p>\n

4. Eventos de formul\u00e1rio<\/h3>\n

No contexto de formul\u00e1rios em JavaScript, podemos lidar com eventos espec\u00edficos desse tipo de elemento, como “submit” (envio do formul\u00e1rio) ou “input” (quando um valor \u00e9 alterado em um campo). Esses eventos s\u00e3o muito importantes para a valida\u00e7\u00e3o de dados, envio, limpeza de campos, entre outras funcionalidades relacionadas a formul\u00e1rios.<\/p>\n

5. Preven\u00e7\u00e3o de comportamento padr\u00e3o<\/h3>\n

Em algumas situa\u00e7\u00f5es, \u00e9 necess\u00e1rio cancelar o comportamento padr\u00e3o de um evento. Por exemplo, para evitar que um link atualize a p\u00e1gina, pode-se utilizar o m\u00e9todo preventDefault() do objeto Event. Isso \u00e9 \u00fatil quando \u00e9 necess\u00e1rio personalizar o comportamento de um evento de acordo com as necessidades espec\u00edficas de uma aplica\u00e7\u00e3o.<\/p>\n

Lista de eventos do DOM mais comuns em JavaScript:<\/h2>\n

Existem v\u00e1rios eventos dispon\u00edveis no DOM, que podem ser utilizados para diferentes finalidades em uma aplica\u00e7\u00e3o JavaScript. Abaixo, listamos alguns dos eventos do DOM mais comumente utilizados:<\/p>\n