Publicado em por MundoJS

JavaScript Básico: Eventos no JavaScript 13 (Parte 1)

Código do Vídeo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Eventos HTML</title>
</head>
<body>
    <button id="btn1">Ação 1</button>

    <input id="input1" type="text" />

    </div>
    <script>
        function teste() {
            console.log("Olá Mundo");
        }

        //document.getElementById("btn1").onclick = teste;
        document.getElementById("btn1").onmouseover = teste;

        document.getElementById("input1").onkeyup = function(){
          console.log("tecla pressionada");
        };
        
    </script>
</body>
</html>

O que são Eventos?

Eventos são ações que ocorrem na sua página. Eles deixam a página mais dinâmica e interessante. O JavaScript pode manipular eventos, que são blocos de código executados quando a ação for disparada.

Como aplicar/fazer um Evento?

Existem três maneiras de aplicar um evento em JavaScript, são elas:

Adicionar o evento diretamente na tag HTML:

Neste modo, você adicionará o evento diretamente na tag html, criando apenas a função no seu JavaScript:

<!-- Nesta forma, você adicionará o evento na própria tag HTML-->
<button id="idDoElemento" onclick="funcao()">Ação</button>
<script>
// Esta função retorna a frase Olá Mundo no console
// quando a mesma for disparada
function funcao(){
    console.log("Olá Mundo");
}
</script>

Acessando a tag pelo ID e atribuindo a propriedade ao evento:

Utilizando o document.getElementById(), você acessará a tag e atribuirá a propriedade ao evento, chamando a função criada:

// Esta função acessa a tag e atribui a propriedade 
// ao evento
document.getElementById("idDoElemento").onclick = funcao;

Outros Eventos JavaScript:

Existe uma infinidade de eventos no JavaScript, veja alguns exemplos abaixo:

onMouseOver:

O evento onMouseOver executa a ação quando o usuário passa o mouse sobre o elemento indicado:

// O usuário executará o evento quando passar
// com o mouse por cima do elemento
document.getElementById("idDoElemento").onmouseover = teste;

onKeyUp:

O evento onKeyUp executa a ação quando o usuário pressionar e soltar alguma tecla:

// O usuário executará o evento quando
// pressionar e soltar alguma tecla
document.getElementById("idDoElemento").onkeyup = function(){
    console.log("tecla pressionada");
};

onLoad:

O evento OnLoad realizará o evento quando a tela estiver sendo carregada:

window.onload = function () {
    alert("Ola Mundo");
};

Exercícios

1. Utilizando um evento diretamente em uma tag HTML, crie um evento onClick que retorne uma mensagem no console no momento que o usuário passar com o mouse em cima do botão:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exercícios</title>
</head>
<body>
    <button id="" onclick="">Botão</button>
</body>
</html>

2. Levando como base o código do exercício 1, transforme o botão em um campo de input e redefina a função onClick para onMouseOver. Refaça o exercício declarando a função de 3 maneiras diferentes. Caso você ainda não tenha assistido os vídeos sobre funções:Funções Parte 1 e Funções Parte 2.

3. Crie um botão com um evento que mostrará um alert. Este alert exibirá a frase: “Clicks = x”, onde x é o número de vezes que o botão foi clicado.

Deixe um comentário