O que são eventos em JavaScript e como são tratados?

Eventos são ações ou ocorrências que acontecem no sistema. No mundo da programação, eventos são algo que acontece com os elementos HTML. Mas quando é usado em páginas HTML, pode reagir a esses eventos. Neste artigo, veremos quais são os diferentes tipos de eventos em JavaScript e como funcionam, na seguinte sequência:

• O que são eventos em JavaScript?
• Tipos de eventos em JavaScript
  • Evento Onclick
  • Evento Onkeyup
  • Evento Onmouseover
  • Evento Onload
  • Evento Onfocus

O que são eventos em JavaScript?

Javascript possui eventos que fornecem uma interface dinâmica para uma página da web. Esses eventos estão conectados a elementos no Modelo de Objeto de Documento (JULGAMENTO).

Além disso, esses eventos, por padrão, usam a propagação de bolhas, ou seja, para cima no DOM dos filhos para os pais. Podemos vincular eventos como embutidos ou em um script externo. Com a ajuda do JavaScript, você pode detectar quando certos eventos acontecem e fazer com que coisas ocorram em resposta a esses eventos.

Tipos de eventos em JavaScript

Existem diferentes tipos de eventos em que são usados ​​para reagir a eventos. Aqui, discutiremos alguns dos eventos famosos ou mais comumente usados, como:

• Onclick
• Onkeyup
• Onmouseover
• Carregando
• No foco

Então, vamos prosseguir e dar uma olhada nesses eventos em JavaScript com exemplo.

Evento Onclick

O evento Onclick é um evento de mouse e provoca qualquer lógica definida se o usuário clicar no elemento ao qual está vinculado. Vamos dar um exemplo e ver como funciona:

function edu () {alert ('Bem-vindo ao Edureka!')} Clique no botão

Resultado:

o que é um namespace c ++

Após clicar no botão, você receberá a seguinte mensagem de alerta:

Evento Onekeyup

Este evento é um evento de teclado e é usado para executar instruções sempre que uma tecla é liberada após pressioná-la. O exemplo a seguir mostra o funcionamento do evento:

var a = 0 var b = 0 var c = 0 função changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 if (a> 255) a = a - b if (b> 255) b = a if (c> 255) c = b}

Resultado:

Depois de escrever algo, fica assim:

Evento Onmouseover

O evento onmouseover em JavaScript corresponde a passar o ponteiro do mouse sobre o elemento e seus filhos, aos quais está vinculado. O exemplo é mostrado abaixo:

function hov () {var e = document.getElementById ('hover') e.style.display = 'none'}

Resultado:

A caixa colorida aparece antes de passar o mouse. Assim que você passa o mouse sobre a caixa, ela desaparece.

Evento Onload

O evento onload é evocado quando um elemento é carregado completamente. Vamos dar um exemplo e ver como funciona:

Resultado:

Evento Onfocus

O evento Onfocus possui uma lista de elementos que executa instruções sempre que recebe o foco. O exemplo a seguir mostra como funciona o evento onfocus:

função focada () {var e = document.getElementById ('input') if (confirm ('Focus Event')) {e.blur ()}}
Foco na caixa de entrada:
 

Resultado:

Esses são alguns dos eventos mais usados ​​em JavaScript. Com isso, chegamos ao final do nosso artigo. Espero que você tenha entendido o que são eventos e como são usados.

Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento torna você proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

Tem alguma questão para nós? Mencione isso na seção de comentários deste blog e entraremos em contato com você.