Como usar eventos no JavaScript

Eventos são a base da interatividade em aplicações web. Com o JavaScript, é possível criar eventos para capturar ações do usuário e executar código em resposta.

[{"selector":"#anim-8ccf7e3b-ffe9-4298-887f-ba42b8a474bc [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-26326bf7-5abc-4bf2-8484-4c7b8fc1cce2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-790ecfdd-867e-4b21-9eec-610ba5cbde22","keyframes":{"transform":["translate3d(0px, -189.45067%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7be53f67-9fba-4667-baaf-08d5d0f460fd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-123d587d-9fac-4ddb-90a2-3107352e1a6e","keyframes":{"transform":["translate3d(0px, 174.98687%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que são eventos?

[{"selector":"#anim-6eead193-9136-454d-841b-455a2d3cf20c [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-62.44873024089035%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-338f2138-46a1-482b-8b32-f0f74cfec240","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-32f05181-daca-489e-90a7-281ccb32ac6a","keyframes":{"transform":["translate3d(114.46540%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-83feb16d-7215-40be-9d71-92431dddbf2e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c435363f-7f5e-4b5e-873a-661f076af115","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b6a4433a-63a3-417c-ae18-2c8da2c7b0a9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3533ea59-d57d-43cc-aa4b-9c71a5e6710c","keyframes":{"transform":["translate3d(115.40880%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Capturando eventos

[{"selector":"#anim-a2730f1d-9b04-4f60-b947-f57cb6dfd2ef [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-90ba40ea-3740-42c3-9602-50daecd866c1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-07d3a486-0e98-4986-af70-ade788b1dde6","keyframes":{"transform":["translate3d(0px, -165.10969%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-19bf154f-64d7-4d35-af47-a92677aa46dc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-53ec3e81-bb3a-427c-9e6f-f432fb819d13","keyframes":{"transform":["translate3d(0px, 143.55370%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-69eef2ac-fa99-4f47-b1a2-1c60ed27928f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9a045092-0a60-49f7-998d-79c5b3b08cda","keyframes":{"transform":["translate3d(-116.29393%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Tipos de eventos

[{"selector":"#anim-988788ff-99a2-4956-82a4-7861c43d5491 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-22cd6b10-ed5c-45c6-9435-d5092f0bebde","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a4d43c55-7d6d-481a-989d-6ccd89aa8877","keyframes":{"transform":["translate3d(114.28572%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8b66d203-0994-448f-8cf9-3330b289cd8c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e0eaec2e-ccd8-4638-bf8a-cc4107ce50e3","keyframes":{"transform":["translate3d(-114.05751%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-125c2ae0-b2da-47c3-aac1-ad6a6e792da4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ff626179-d495-42cb-8f9a-2ffa373ae490","keyframes":{"transform":["translate3d(118.32797%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5a8cc119-418b-45b2-aa53-2bdee92b93d6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-70b148b4-9799-411a-b0dd-ae59ed506bb4","keyframes":{"transform":["translate3d(-115.01598%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Prevenindo a ação padrão

[{"selector":"#anim-664809fd-e75f-4eb3-9408-4cc1b96569f1 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(14.392977369825196%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-12696845-2b45-44f5-b360-c3e99f884a62","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-94d16d78-fe58-45df-a987-4f1da6c0e32b","keyframes":{"transform":["translate3d(0px, -155.82012%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-63a5089d-43ef-4127-9897-fe88e86d917b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9954e316-ea5d-4c6d-bd72-c0a624933fa9","keyframes":{"transform":["translate3d(0px, 163.70775%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-37b5c346-8c34-4430-9a7c-3d30a11c141c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-11f03baf-cc5d-458b-9964-0c7460f23ef7","keyframes":{"transform":["translate3d(-115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Com o JavaScript você adiciona o dinamismo aos seus sites e atrai muito mais usuários!

[{"selector":"#anim-994bf587-bd0b-4e6a-8fa3-a000f31d28dc [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.246337776828504%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-8a7bd7de-6377-4f50-bcdc-cc0c4ad04407","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-44af009e-8233-4a03-8d8e-22a2a5941bb5","keyframes":{"transform":["translate3d(115.97445%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7a0e7f09-eae7-432b-9c47-3869cd77ff06","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f713bc88-232e-4b10-9ef3-8ece3f32b875","keyframes":{"transform":["translate3d(-115.65495%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Aprenda mais sobre JavaScript

[{"selector":"#anim-892c0ea8-1282-4fbd-89c3-e40bb2a3ca2a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8d0eecf4-bc37-4ed5-a809-4fd830110965","keyframes":{"transform":["translate3d(-113.58024%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a589f8a5-ba8c-42d3-b84b-bd4457b71739","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-29065357-1501-4d71-8eb7-a1b85eb884de","keyframes":{"transform":["translate3d(118.32797%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5cc9ce3f-8c47-41fe-8f93-18b6306a68ee [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Leia mais

Como usar eventos no JavaScript

Conheça o básico da linguagem web mais usada.

Eventos são a base da interatividade em aplicações web. Com o JavaScript, é possível criar eventos para capturar ações do usuário e executar código em resposta.

O que são eventos?

Eventos são ações que ocorrem na página da web, como um clique de mouse, uma pressionada de tecla ou o carregamento da página.

Capturando eventos

Para capturar um evento, você pode usar o método "addEventListener". Este método recebe dois parâmetros: o tipo de evento e uma função que será executada em resposta ao evento.

Tipos de eventos

Existem vários tipos de eventos disponíveis em JavaScript.

Incluindo eventos de mouse, eventos de teclado, eventos de formulário e eventos de carga, por exemplo

Prevenindo a ação padrão

Algumas ações do usuário, como clicar em um link, podem ter uma ação padrão associada a ela, como carregar uma nova página. É usado o comando "preventDefault" para resolver este problema.

Com o JavaScript você adiciona o dinamismo aos seus sites e atrai muito mais usuários!

Crie sites dinâmicos!

Aprenda mais sobre JavaScript

Confira o artigo completo clicando logo abaixo!