{"id":776,"date":"2024-02-20T18:18:53","date_gmt":"2024-02-20T21:18:53","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=776"},"modified":"2024-02-23T11:46:39","modified_gmt":"2024-02-23T14:46:39","slug":"eventos-em-javascript-tudo-o-que-voce-precisa-saber","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=776","title":{"rendered":"Eventos em JavaScript: Tudo o Que Voc\u00ea Precisa Saber!"},"content":{"rendered":"\n<p>Os eventos desempenham um papel fundamental no desenvolvimento web moderno, especialmente quando se trata de criar interatividade e dinamismo nas p\u00e1ginas. Em JavaScript os eventos s\u00e3o essenciais para lidar com a\u00e7\u00f5es do usu\u00e1rio e desencadear respostas correspondentes no navegador. Neste artigo, vamos explorar os eventos em JavaScript, desde os conceitos b\u00e1sicos at\u00e9 t\u00e9cnicas avan\u00e7adas, para que voc\u00ea possa aproveit\u00e1-los ao m\u00e1ximo em seus projetos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>O Que S\u00e3o Eventos em JavaScript?<\/strong><\/h3>\n\n\n\n<p>Eventos em JavaScript s\u00e3o a\u00e7\u00f5es que ocorrem no navegador, como clicar em um bot\u00e3o, mover o mouse sobre um elemento ou pressionar uma tecla do teclado. Cada vez que um evento \u00e9 acionado, ele pode desencadear uma fun\u00e7\u00e3o espec\u00edfica, permitindo que voc\u00ea responda dinamicamente \u00e0s a\u00e7\u00f5es do usu\u00e1rio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tipos de Eventos<\/strong><\/h3>\n\n\n\n<p>JavaScript oferece uma ampla variedade de eventos para diferentes intera\u00e7\u00f5es do usu\u00e1rio. Alguns dos eventos mais comuns incluem:<\/p>\n\n\n\n<ol>\n<li><strong>Eventos de Mouse:<\/strong> <code>click<\/code>, <code>mouseover<\/code>, <code>mouseout<\/code>, <code>mousemove<\/code>, entre outros.<\/li>\n\n\n\n<li><strong>Eventos de Teclado:<\/strong> <code>keydown<\/code>, <code>keyup<\/code>, <code>keypress<\/code>.<\/li>\n\n\n\n<li><strong>Eventos de Formul\u00e1rio:<\/strong> <code>submit<\/code>, <code>change<\/code>, <code>focus<\/code>, <code>blur<\/code>.<\/li>\n\n\n\n<li><strong>Eventos de Documento:<\/strong> <code>DOMContentLoaded<\/code>, <code>load<\/code>, <code>scroll<\/code>.<\/li>\n\n\n\n<li><strong>Eventos de Touch:<\/strong> <code>touchstart<\/code>, <code>touchmove<\/code>, <code>touchend<\/code>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Como Lidar com Eventos em JavaScript<\/strong><\/h3>\n\n\n\n<p>Para lidar com eventos em JavaScript, voc\u00ea pode usar o m\u00e9todo <code>addEventListener()<\/code> para associar um ouvinte de eventos a um elemento HTML.<\/p>\n\n\n\n<p>Aqui est\u00e1 um exemplo simples de um evento JavaScript . Vamos criar um bot\u00e3o que, quando clicado, exibir\u00e1 uma mensagem.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"644\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-21.png\" alt=\"\" class=\"wp-image-777\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-21.png 661w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-21-300x292.png 300w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Aula 04: Eventos em JavaScript com DOM\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/WwfrRk4Qu4s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>C\u00d3DIGO DO V\u00cdDEO \n<\/strong>\n&lt;!DOCTYPE html>\r\n&lt;html lang=\"pt-br\">\r\n&lt;head>\r\n    &lt;meta charset=\"UTF-8\">\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    &lt;title>Aula 04 Eventos&lt;\/title>\r\n   \r\n    &lt;style>\r\n        div#local{\r\n            font: normal 20pt Arial;\r\n            color: rgb(47, 231, 231);\r\n            background-color: green;           \r\n            width: 200px;\r\n            height: 200px;\r\n            text-align: center;\r\n            line-height: 200px;\r\n        }\r\n\r\n    &lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n    &lt;div id=\"local\">\r\n       \r\n        &lt;\/div>\r\n\r\n        &lt;script>\r\n\r\n            var local = document.getElementById('local');\r\n            local.addEventListener('click', clicar);      \r\n            local.addEventListener('mouseenter', entrar);  \r\n            local.addEventListener('mouseout', sair); \r\n\r\n\r\n            \r\n           function clicar(){\r\n            local.innerText= 'Clicou no local!';\r\n            local.style.background='#800060';\r\n           }     \r\n           \r\n           function entrar(){\r\n            local.innerText= 'Entrou no local!';\r\n           }\r\n\r\n           function sair(){\r\n            local.innerText= 'Saiu do local!';\r\n           }\r\n        &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html><\/code><\/pre>\n\n\n\n<p><strong>Conclus\u00e3o<\/strong><\/p>\n\n\n\n<p>Os eventos desempenham um papel crucial no desenvolvimento web, permitindo interatividade e resposta \u00e0s a\u00e7\u00f5es do usu\u00e1rio. Neste post, exploramos os conceitos b\u00e1sicos dos eventos em JavaScript, desde a associa\u00e7\u00e3o de ouvintes de eventos at\u00e9 a captura e propaga\u00e7\u00e3o de eventos.<\/p>\n\n\n\n<p>Dominar os eventos em JavaScript \u00e9 fundamental para criar experi\u00eancias web din\u00e2micas e envolventes. Portanto, continue praticando e explorando diferentes t\u00e9cnicas para aproveitar ao m\u00e1ximo o poder dos eventos em seus projetos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os eventos desempenham um papel fundamental no desenvolvimento web moderno, especialmente quando se trata de criar interatividade e dinamismo nas p\u00e1ginas. Em JavaScript os eventos s\u00e3o essenciais para lidar com a\u00e7\u00f5es do usu\u00e1rio e desencadear respostas correspondentes no navegador. Neste artigo, vamos explorar os eventos em JavaScript, desde os conceitos b\u00e1sicos at\u00e9 t\u00e9cnicas avan\u00e7adas, para que voc\u00ea possa aproveit\u00e1-los ao m\u00e1ximo em seus projetos. O Que S\u00e3o Eventos em JavaScript? Eventos em JavaScript s\u00e3o a\u00e7\u00f5es que ocorrem no navegador, como clicar em um bot\u00e3o, mover o mouse sobre um elemento ou pressionar uma tecla do teclado. Cada vez que um evento \u00e9 acionado, ele pode desencadear uma fun\u00e7\u00e3o espec\u00edfica, permitindo que voc\u00ea responda dinamicamente \u00e0s a\u00e7\u00f5es do usu\u00e1rio. Tipos de Eventos JavaScript oferece uma ampla variedade de eventos para diferentes intera\u00e7\u00f5es do usu\u00e1rio. Alguns dos eventos mais comuns incluem: Como Lidar com Eventos em JavaScript Para lidar com eventos em JavaScript, voc\u00ea pode usar o m\u00e9todo addEventListener() para associar um ouvinte de eventos a um elemento HTML. Aqui est\u00e1 um exemplo simples de um evento JavaScript . Vamos criar um bot\u00e3o que, quando clicado, exibir\u00e1 uma mensagem. Conclus\u00e3o Os eventos desempenham um papel crucial no desenvolvimento web, permitindo interatividade e resposta \u00e0s a\u00e7\u00f5es do usu\u00e1rio. Neste post, exploramos os conceitos b\u00e1sicos dos eventos em JavaScript, desde a associa\u00e7\u00e3o de ouvintes de eventos at\u00e9 a captura e propaga\u00e7\u00e3o de eventos. Dominar os eventos em JavaScript \u00e9 fundamental para criar experi\u00eancias web din\u00e2micas e envolventes. Portanto, continue praticando e explorando diferentes t\u00e9cnicas para aproveitar ao m\u00e1ximo o poder dos eventos em seus projetos.<\/p>\n","protected":false},"author":1,"featured_media":783,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/776"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=776"}],"version-history":[{"count":9,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/776\/revisions"}],"predecessor-version":[{"id":788,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/776\/revisions\/788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/783"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}