Eventos em JavaScript | Explicado com exemplos
Javascript é conhecido por dar a uma página da web a capacidade de "pensar e agir", o que é possível devido a eventos. Os eventos atuam como gatilhos que levam os scripts de back -end a executar ações. Eles podem ser facilmente chamados de "coisas" Isso acontece em uma página da web, esses eventos podem ser qualquer coisa: carregando uma página da web, clicando em um botão HTML ou pairando o mouse sobre um elemento HTML específico.
Existem gazilhões de eventos que podem desencadear JavaScript, temos eventos para desencadear uma função no mouse click ou no mouse pairar, mas vamos cobrir o trabalho com eventos e javascript.
Um exemplo simples de um evento JavaScript sendo executado em uma prensa de botão é mostrado abaixo:
Manipuladores de eventos
Os eventos são gerenciados por manipuladores de eventos; O HTML fornece a capacidade de adicionar vários tipos de manipuladores de eventos em seus elementos, esses manipuladores de eventos permitem que o programador execute o código JavaScript, executando uma função.
Existem 3 tipos de manipuladores de eventos:
- DOM-on-Event ouvinte
- Ouvinte em linha em linha
- Método addEventListener ()
O ouvinte DOM On-Event
Podemos usar ouvintes de eventos nas propriedades DOM, como desencadear um evento com o carregamento completo da página da web. Esses ouvintes de eventos também podem ser adicionados aos elementos HTML, mas com a restrição sendo um ouvinte de evento por cada elemento HTML.
Por exemplo, queremos alertar o usuário sobre o carregamento completo da página da web, podemos fazer isso acessando o objeto da janela do DOM:
Depois de executar o arquivo HTML, você verá a seguinte saída:
Como você pode ver, depois de carregar completamente a página da web, o JavaScript alerta o usuário que a página da web carregou.
Observação: O objeto de janela é usado para funcionar em eventos globais.
O ouvinte em linha em linha
Um dos métodos triviais ao trabalhar com HTML e JavaScript é usar os ouvintes em linha em linha, fazemos isso adicionando o ouvinte do evento como um atributo do elemento dentro de sua tag.
Por exemplo, no exemplo acima, adicionamos um “OnClick ()” Evento dentro do elemento do botão, quando usamos o ouvinte em linha em linha, o definimos igual a uma função que será invocada quando o evento for acionado.
Como você pode ver, btnclicked () é a função que será executada em um botão Clique.
Se quisermos imprimir a string para consolar “Você pressionou o botão”, podemos fazer isso escrevendo o btnclicked () função assim:
Quando você executa o arquivo HTML, você obtém a seguinte saída.
Usando addEventListener ()
O terceiro manipulador de eventos é adicionado usando o método addEventListener (), esta é a maneira nova e mais usada de lidar com eventos no JavaScript; Para mostrar isso, criaremos uma div em HTML usando as seguintes linhas de código:
exemplo addEventListener ()
Para adicionar um ouvinte de evento neste div Você vai usar o seguinte snippet de script:
Se você olhar atentamente para o trecho de script, notará que estamos adicionando três ouvintes de eventos diferentes nesta div, um quando o cursor entrar na div, segundo quando o cursor sai da div e última quando o cursor clicar na div; Depois de escrever todo esse código, salve -o, recarregue a página e você obterá a seguinte saída:
Como você pode ver no console, nossos manipuladores de eventos estão funcionando e o código JavaScript está sendo executado.
Isto é, para eventos em javascript
Conclusão
Os eventos em JavaScript são a ocorrência de tais casos que levam o JavaScript a realizar alguma manipulação nos elementos HTML ou a executar a funcionalidade de back-end. O evento em JavaScript é usado para fornecer à página da web html a capacidade de pensar e executar ações, esses eventos podem ser qualquer coisa que um usuário faça: clicando em um botão, pressionando uma tecla específica ou um movimento específico do mouse. Também existem alguns eventos globais que podem ser acessados usando o objeto da janela, como a janela.carregar(). Aprendemos sobre vários tipos de manipuladores de eventos junto com seus exemplos.