Eventos no JavaScript: Guia para Iniciantes

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-c225ad0d-9f8d-4509-bae3-cb265e8c712c [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-fdb5a1c4-07d3-47bd-8174-9624b28227de","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e95220d9-7d8d-4069-9b8f-5ac693137579","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-4c40a9e4-de4c-4075-b6e6-ffdb43c7833b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b23b9898-4c0b-432b-be10-6db8ceab55e6","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-c9267741-241a-4df7-b63f-24317c3673b0 [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-c601a515-470f-44a4-8acf-5f90c7ce5238","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-41002284-1cb7-446b-a09f-9c4c3ac3118a","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-9cb6abfc-652f-4047-88a4-c8f528ef55bc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-301ab923-8032-4284-9e80-7aead0b8c29f","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-ee7002f7-af27-4580-b3d4-d3f1b0cf3d63","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1f3e43c6-412f-470b-8946-7971b0ed1d67","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-f39ab624-d118-47c5-9b99-1ccbbed83862 [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-c91985d7-e9e5-489d-9b60-26cd9ff6c72d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ba8747f6-ede6-46b3-a7ba-16087049bf67","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-0381725a-bf79-4feb-a5d3-998191512630","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3aca083f-5154-47f8-8073-92af93b635a1","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-3368ced3-ed44-4f1f-902b-485cf2a9edee","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-be658939-1fee-4ef0-9028-929a1a465b59","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-67395fc6-10ad-40b1-8d64-01f169c1bf31 [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-d06d0159-32e5-4095-a5f1-a64a40b94ab5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8ee5083c-a88a-4e3c-8a62-89f8ff5c7190","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-98b619ab-56c1-49b4-b89e-1dc0170c249f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d50b7313-9cc1-43a7-bb77-fc997e1cf4ad","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-e758a92a-f713-4898-b6ab-f36b63bfb50c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-550616d4-7321-4499-a079-79d204ac66d9","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-95848d40-f21e-4c68-890d-383f2ae131ba","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb98a895-6a69-4bbe-bf6a-d0913a9fba7e","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-db4d6a4e-6969-489e-b338-f7da6e4be1e4 [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-9291c4d9-8d71-43fe-8c5a-0b110b20725a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7f300e9c-bb69-4abf-bfdc-3d0f947c367e","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-39985cbd-16ea-4360-bbc5-60467189c1ec","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-873119c0-5f34-4bb8-bb2c-9add956c1aca","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-2443382f-cf59-439e-812f-8cf62fd463e0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-44341ca3-cf0a-461f-81e5-e9fe83e5345d","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-ecf5a0e7-a32e-4798-a71c-704035b239a7 [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-3035b3b0-95ae-4a6e-9f8f-e4a372a691d1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-142b262f-51e5-4612-9bb9-c900342b06f6","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-36eece1c-fb0c-4811-baf3-7b83edbfa6a9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-35efb040-61c5-42ac-9e92-5afab1fc0252","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-69983d0b-bb5b-461a-a2f9-654c9ebeb4cd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5959a333-1566-4ae8-b7c2-5c4ee961ea08","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-d3682253-ecfd-4c57-99b0-0fec8895ea55","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6d94b105-91b0-4016-b011-3787e141a83f","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-ef025b5f-1bc9-47e8-95ac-7c049c84c410 [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

Eventos no JavaScript: Guia para Iniciantes

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!