Eventos (Events) do JavaScript

Eventos são operações que ocorrem no navegador, que podem ser iniciadas pelo usuário ou pelo próprio navegador.

A seguir estão alguns exemplos de eventos comuns que podem ocorrer em um site:

• A página foi carregada

• O usuário clicou em um botão

• O usuário rolou o documento

• O usuário ajustou o tamanho do navegador

• O usuário moveu o mouse

• O usuário submeteu o formulário

• O usuário pressionou uma tecla no teclado

• o campo de entrada HTML foi alterado

Cada evento disponível temmanipulador de eventosomanipulador de eventosum bloco de código (geralmente uma função JavaScript definida pelo usuário) que será executado quando o evento for acionado.

Ao entender eventos, você será capaz de fornecer uma experiência web mais interativa ao usuário final.

um exemplo simples

Quando um evento é acionado, por exemplo, quando o usuário clica em um botão, é possível executar um bloco de código JavaScript.

No exemplo a seguir, temos um botão que, ao ser pressionado, chamashowDate()função:

<button onclick="showDate()">Clique em mim</button>

JavaScript showDate()A função é como a seguinte:

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

maneiras de usar eventos

Os eventos podem ser atribuídos a elementos de três maneiras, para que sejam executados quando acionados por eventos associados:

• manipulador de eventos em linha

• propriedade do manipulador de eventos

• ouvinte de eventos

Vamos apresentar todos os três métodos para garantir que você esteja familiarizado com cada maneira de acionar eventos.

propriedades de manipulação de eventos em linha

Para atribuir eventos a elementos HTML, podemos usarpropriedades de evento do HTML.

No exemplo a seguir, quando o usuário clicar<p>ao clicar no elemento, seu conteúdo será alterado:

<p onclick="this.innerHTML = 'Hello world'">Clique aqui para alterar este texto</p>

No exemplo a seguir, quando o usuário clicar<p>ao clicar no elemento, será chamada uma função:

<p onclick="changeText(this)">Clique aqui para alterar este texto</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

Neste exemplo, temos um botão, ao clicar no qual o fundo se tornará uma cor aleatória:

<button onclick="bgChange()">Clique em mim</button>
<script>
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}
</script>

O manipulador de eventos embutido é uma maneira simples de começar a entender eventos, mas geralmente não deve ser usado além de fins de teste e educação.

propriedade do manipulador de eventos

O próximo passo para o manipulador de eventos embutido épropriedade do manipulador de eventosIsso é muito semelhante ao manipulador de eventos embutido, exceto que configuramos o atributo do elemento no JavaScript em vez do atributo HTML.

No seguinte exemplo, atribuiremos o evento onclick ao elemento HTML com id "para":

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

Também podemos atribuir a propriedade do manipulador de eventos como igual ao nome da função nomeada:

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

No exemplo acima, será atribuído o nomechangeTexta função atribuída aoid="para"do elemento HTML.

ao clicar neste elemento será executada esta função.

Neste exemplo, temos um botão, ao clicar no qual o fundo se tornará uma cor aleatória:

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}

Atenção:manipulador de eventosnão segueA maioria do código JavaScript segue a convenção de nomeação camelCase. Observe que o código éonclick, nãoonClick.

Eventos onfocus e onblur

onfocus ao obter o foco do elemento será acionado este evento.

onblur ao perder o foco do elemento será acionado este evento.

<input type="text" onfocus="func1(this)" onblur="func2(this)"

Evento onchange

onchange ao alterar o valor do elemento será acionado este evento.

<input type="text" onchange="myFunc(this)" value="Hello">

Eventos onmouseover e onmouseout

onmouseover ao mover o dispositivo de ponteiro (normalmente o mouse) para dentro do elemento ou de um de seus elementos filhos, será acionado este evento.

onmouseout ao mover o dispositivo de ponteiro (normalmente o mouse) para fora do elemento ou de um de seus elementos filhos, será acionado este evento.

Leia mais

Referência HTML:Referência de atributo de evento HTML

Referência JavaScript:Referência do objeto de evento DOM HTML