Eventos de formulário de JavaScript

Evan Mueller

Os eventos JavaScript são definidos como a interação entre JavaScript e HTML. Os eventos ocorrem toda vez que a página da web é manipulada pelo usuário ou pelo navegador. Modelo de Objeto de Documento (DOM) A versão 3 consiste em eventos JavaScript e estes fazem parte de quase todos os elementos HTML e podem ativar o código JavaScript. Clicando em um botão, pressionando uma tecla, maximizando uma janela, etc, é considerada como um evento.

Existem vários tipos de eventos JavaScript, no entanto, discutiremos especificamente os eventos do formulário JavaScript neste artigo.

Os eventos que ocorrem através da interação de um usuário com um formulário HTML são chamados de eventos de formulário JavaScript. Existem vários tipos de eventos que se enquadram na categoria de eventos de formulário JavaScript que estão listados abaixo.

onblur
em mudança
ONCONTEXTMENU
No foco
oninput
oninvalidl
OnReset
Onsearch
ONSELHECT
OnSubmit

Cada um dos eventos acima mencionados é discutido abaixo.

Evento OnBlur

O evento OnBlur acontece quando o foco de um elemento é perdido. É usado principalmente dentro do código de validação de um formulário. Não borbulha e não pode ser cancelado. Ele suporta todas as tags html que não sejam , ,
, , , , , , , , e está incluído no nível 2 do DOM.</p> <p><strong>Sintaxe</strong></p> <p>A sintaxe do evento OnBlur é a seguinte.</p> <p>Sintaxe HTML</p> <element onblur="functionName()"> <p>Sintaxe JavaScript</p> objeto.onblur = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("Blur", Script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br>Digite seu nome: <br><script><br>function functionName() <br>document.getElementById("tutorial").style.background = "yellow";<br><br></script><br></body><br></html> <p>No exemplo acima, quando o usuário sai do campo de entrada, o evento OnBlur é acionado e a cor de fundo do campo de entrada muda para amarelo.</p> <p><strong>Saída</strong></p> <p>Evento de Onchange</p> <p>Quando um usuário altera o valor de um elemento e deixa o elemento, o evento de OnChange acontece. Este evento se assemelha ao evento OnInput, no entanto, o que o diferencia do evento OnInput é que ele pode funcionar no elemento e acontece quando um elemento perde seu foco.</p> <p>Além disso, pode apoiar ,,,,,, e tags html. Ele borbulha, mas não pode ser cancelado e faz parte da versão 2 do DOM.</p> <p><strong>Sintaxe</strong></p> <p>A sintaxe do evento OnChange é a seguinte.</p> <p>Sintaxe HTML</p> <element onchange="functionName()"> <p>Sintaxe JavaScript</p> objeto.onChange = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("alteração", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br>Nome: <br><script><br>function functionName() <br>var change = document.getElementById("tutorial");<br>change.value = change.value.toUpperCase();<br><br></script><br></body><br></html> <p>No exemplo acima, quando um usuário entra em seu nome no campo de entrada e depois sai do campo de entrada, o evento de onchange é acionado porque um elemento (campo de entrada) perdeu seu foco e, como resultado.</p> <p><strong>Saída</strong></p> <p>Evento OnContextMenu</p> <p>Quando o menu de contexto de um elemento é aberto usando o clique com o botão direito, o evento ONCONTEXTMENU acontece. Ele borbulha e também é cancelável. Este evento suporta todas as tags HTML e está incluído na versão 3 DOM.</p> <p><strong>Sintaxe</strong></p> <p>A sintaxe do evento onctextmenu é dada abaixo.</p> <p>Sintaxe HTML</p> <element oncontextmenu="funtionName()"> <p>Sintaxe JavaScript</p> objeto.ONCONTEXTMENU = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("contextmenu", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>alert("You just right-clicked!");<br><br></script><br></body><br></html> <p>No exemplo acima, quando você clica com o botão direito do mouse no campo de entrada, o evento ONCONTEXTMENU acionará e primeiro uma caixa de disciato aparecerá dizendo que você acabou de executar um clique direito e depois de clicar em OK na caixa de diálogo, o menu de contexto será aberto.</p> <p><strong>Saída</strong></p> <p>Agora, quando você clicará com o botão direito do mouse no campo de entrada, a caixa de diálogo aparecerá.</p> <p>Depois de clicar em OK, o menu de contexto será aberto.</p> <p>Evento Onfocus</p> <p>O evento OnFocus acontece quando um elementos é focado. É usado principalmente com, e . Não borbulha e não pode ser cancelado. Ele suporta todas as tags html que não sejam , , <br>, , , <iframe>, , , , , e está incluído no nível 2 do DOM.</p> <p><strong>Sintaxe</strong></p> <p>A sintaxe do evento Onfocus é a seguinte.</p> <p>Sintaxe HTML</p> <element onfocus="functionName"> <p>Sintaxe JavaScript</p> objeto.onfocus = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("foco", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br>Digite seu nome: <br><p>Uma função altera a cor de fundo do campo de entrada quando está focado.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Saída</strong></p> <p>Quando você clica no campo de entrada, a cor de fundo do campo de entrada será alterada para azul. Já mostramos o estado antes e depois do campo de entrada abaixo.</p> <p><strong>Antes</strong></p> <p><strong>Depois</strong></p> <p>Evento OnInput</p> <p>Quando um usuário fornece uma entrada para um elemento, o evento OnInput acontece. Este evento se assemelha ao evento OnChange, no entanto, o que o diferencia do evento OnChange é que isso acontece imediatamente após o valor do elemento ter sido capturado. Além disso, pode apoiar ,,,,,, e tags html. Ele borbulha, mas não pode ser cancelado e faz parte da versão 3 do DOM.</p> <p><strong>Sintaxe</strong></p> <p>A sintaxe do evento OnInput é a seguinte.</p> <p>Sintaxe HTML</p> <element oninput="functionName"> <p>Sintaxe JavaScript</p> objeto.oninput = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("entrada", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br>Nome: <br><script><br>function functionName() <br>alert("You just changed the input field value!");<br><br></script><br></body><br></html> <p>No exemplo acima, quando você tenta alterar o valor dentro do campo de entrada, o evento OnInput gatilhos e uma caixa de diálogo aparece que diz que você acabou de alterar o valor do campo de entrada.</p> <p><strong>Saída</strong></p> <p>Assim que você alterar o valor do campo de entrada, a mensagem de alerta aparecerá.</p> <p>Evento OnInValid</p> <p>Quando um usuário fornece uma entrada que não é permitida ou uma entrada inválida, o evento OnInValid acontece. Este evento não borbulha, mas pode ser cancelado. Ele suporta apenas a tag html e está incluído no DOM Nível 3.</p> <p><strong>Sintaxe</strong></p> <p>A sintaxe do evento OnInValid é a seguinte.</p> <p>Sintaxe HTML</p> <element oninvalid="functionName"> <p>Sintaxe JavaScript</p> objeto.oninValid = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("inválido", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br><form><br>Digite seu nome:<br><br><br></form><br><script><br>function functionName() <br>alert("Name field required!");<br><br></script><br></body><br></html> <p>No exemplo acima, se você pressionar o botão Enviar sem fornecer seu nome no campo de entrada, o evento OnInValid acionará e uma mensagem de alerta aparecerá dizendo que o campo de nome é necessário.</p> <p><strong>Saída</strong></p> <p>Evento OnReset</p> <p>Quando um usuário redefine um formulário, ocorre o evento OnReset. Este evento bolhas e pode ser cancelado, além disso, ele suporta apenas o HTML e está incluído no DOM versão 2.</p> <p><strong>Sintaxe</strong></p> <p>Sintaxe do evento OnReset é o seguinte.</p> <p>Sintaxe HTML</p> <element onreset="functionName"> <p>Sintaxe JavaScript</p> objeto.onReset = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("redefinir", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br><form onreset="functionName()"><br>Insira o nome: <br><br></form><br><br><script><br>function functionName() <br>alert("Press OK to reset the form.");<br><br></script><br></body><br></html> <p>No exemplo acima, quando você pressiona o botão de redefinição, o evento OnReset é acionado e uma mensagem de alerta aparece e assim que você pressionar o botão OK na caixa de diálogo, o campo de entrada é liberado.</p> <p><strong>Saída</strong></p> <p>Quando você pressiona o botão de redefinição, a mensagem de alerta aparece.</p> <p>Depois de pressionar o botão OK, o formulário será reiniciado.</p> <p>Evento Onsearch</p> <p>Quando um usuário inicia uma pesquisa em um elemento com tipo = "pesquisa", o evento Onsearch acontece. Este evento não bolhas nem pode ser cancelado, além disso, ele suporta apenas a tag html e está incluído no DOM Nível 3.</p> <p><strong>Sintaxe</strong></p> <p>A sintaxe do evento Onsearch é a seguinte.</p> <p>Sintaxe HTML</p> <element onsearch="functionName"> <p>Sintaxe JavaScript</p> objeto.oneAcrh = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("SEACRH", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br><p>Digite o que deseja pesquisar e pressionar Enter.</p><br><br><br><script><br>function functionName() <br>var search = document.getElementById("mySearch");<br>alert ("Searching for google.com");<br><br></script><br></body><br></html> <p>No exemplo acima, quando você digitar algo na barra de pesquisa e pressionar Enter, o evento Onsearch é acionado e uma mensagem será exibida dizendo que a pesquisa começou.</p> <p><strong>Saída</strong></p> <p>Depois de digitar o Google.com na barra de pesquisa e pressionando Enter.</p> <p>Evento OneSelect</p> <p>Ocorre quando um pedaço de texto é selecionado em um elemento. Não é cancelável e nem bolhas. Ele suporta ,,, e html tags e está incluído no DOM Nível 2.</p> <p><strong>Sintaxe</strong></p> <p>A sintaxe do evento OnSelect é o seguinte.</p> <p>Sintaxe HTML</p> <element onselect="funtionName()"> <p>Sintaxe JavaScript</p> objeto.oneselect = function () script; <p>Javascript addEventListener () sintaxe</p> objeto.addEventListener ("selecione", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br>Selecionar texto: <br><script><br>function myFunction() <br>alert("Text selected");<br><br></script><br></body><br></html> <p><strong>Saída</strong></p> <p>Antes de selecionar.</p> <p>Depois de selecionar.</p> <p>Evento Onsubmit</p> <p>Quando um usuário envia um formulário, o evento onSubmit acontece. Este evento bolhas e pode ser cancelado, além disso, ele suporta apenas a tag html e está incluído no DOM Nível 2.</p> <p><strong>Sintaxe:</strong></p> <p>A sintaxe do evento onSubmit é o seguinte.</p> <p>Sintaxe HTML:</p> <element onsubmit="funtionName()"> <p>Sintaxe JavaScript:</p> objeto.onSubMit = function () script; <p>Javascript addEventListener () sintaxe:</p> objeto.addEventListener ("submeter", script); <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br><form action="/action_page.php" onsubmit="functionName()"><br>Insira o nome: <br><br></form><br><script><br>function functionName() <br>alert("Form submitted!");<br><br></script><br></body><br></html> <p>No exemplo acima, quando você pressiona o botão de envio, o evento onSubmit é acionado e uma caixa de diálogo aparece dizendo que o formulário foi enviado.</p> <p><strong>Saída</strong></p> <p>Conclusão</p> <p>Os eventos que ocorrem quando um usuário interage com um formulário HTML são chamados de eventos de formulário JavaScript. Os eventos que se enquadram na categoria de eventos de formulário JavaScript são o evento OnBlur, OnChange Event, OnContextMenu Evento, Evento Onfocus, Evento OnInput, Evento OnValid, OnReset Event, Onsearch Event, Onelect Event e Onsubmit Event. Todos esses eventos são discutidos em detalhes, juntamente com o exemplo apropriado. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://pt.cyberaxe.org/article/javascript-focus-and-blur-events">« Javascript Focus e Blur Events</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pt.cyberaxe.org/article/what-is-java">O que é Java? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/c-programming">C Programação</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/if-else-statement-in-c-programming">Declaração IF-Else na programação C</a> </div> <div class="white-news__text"> A instrução IF-ELSE é um conceito crucial na programação C que permite a tomada de decisão com base ... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/joey-bartoletti">Joey Bartoletti</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/php">php</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-the-arraymerge-function-in-php">Como usar a função Array_Merge no PHP?</a> </div> <div class="white-news__text"> A função Array_Merge () no PHP permite combinar várias matrizes em uma. Siga este artigo para aprend... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/c-programming">C Programação</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-file-handling-in-c-programming">O que é tratamento de arquivos na programação C?</a> </div> <div class="white-news__text"> O manuseio de arquivos é um aspecto essencial da programação C que permite aos desenvolvedores traba... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/joey-bartoletti">Joey Bartoletti</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/array-of-structs-in-c">Matriz de estruturas em C ++</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/ed-treutel-iv">Ed Treutel IV</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/python-count-characters-in-string">Personagens de contagem de python em string</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/tommie-konopelski">Tommie Konopelski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/salesforce">Força de vendas</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/salesforce-apex---list">Salesforce Apex - Lista</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-aws-control-tower-and-how-to-use-it">O que é a torre de controle da AWS e como usá -la?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/orlando-green">Orlando Green</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-convert-a-map-to-a-string-in-java">Como converter um mapa em uma string em java?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/rickey-greenholt">Rickey Greenholt</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/oracle-database">Banco de dados Oracle</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/java-database-connectivity-with-oracle">Conectividade do banco de dados Java com Oracle</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/joey-bartoletti">Joey Bartoletti</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-an-instance-and-how-to-use-it-in-ec2">O que é uma instância e como usá -lo no EC2?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/pedro-macejkovic">Pedro Macejkovic</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/wireshark">Wireshark</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/understanding-dhcp-using-wireshark">Entendendo o DHCP usando o Wireshark</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/tommie-konopelski">Tommie Konopelski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/c-programming">C Programação</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-print-an-address-of-a-variable-in-c-programming">Como imprimir um endereço de uma variável na programação C?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/shaun-bogan">Shaun Bogan</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-are-constants-in-golang">O que são constantes em Golang?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/shaun-bogan">Shaun Bogan</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Um site sobre o sistema operacional Linux. Aqui você encontrará muitos artigos interessantes e guias úteis</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/python">Pitão</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/postgresql">PostGresql</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c-sharp">C nítido</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-database">Banco de dados Oracle</a></li> </li> <li class="menu-item"><a href="http://pt.cyberaxe.org/all-categories"><b>Todas as categorias</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>