Publicado em por MundoJS

JavaScript Básico: Eventos no JavaScript 14 (Parte 2)

O addEventListener() “escuta” o evento disparado e notifica as outras partes da página quando isto acontece. Com isto, especifica-se o evento que será escutado e a função que será chamada quando o evento for disparado:

Sintaxe:

source.addEventListener(eventName, eventHandler);

Onde:

  • source é o nome do elemento;

  • eventName é a especificação do evento que será escutado;

  • eventHandler é a especificação da função que será chamada quando o evento for disparado;

  • O último argumento diz respeito às fases do evento, capturing e bubbling.

// O removeEventListener serve para remover o addEventListener
// criado anteriormente
removeEventListener('nomeDoEvento', nomeDaFuncao);

Para remover o addEventListener registrado anteriormente, você poderá utilizar a função removeEventListener. O método removeEventListener() remove um manipulador de eventos que foi anexado ao addEventListener. É importante que, para ocorrer a remoção, a função especificada com o addEventListener() deve ser uma função externa :

Exemplo da adição e remoção de um evento:

// Atribui um botão que realiza uma ação
let btnAcao = document.querySelector("#btnAcao");
// Atribui um botão que removerá o evento
let btnRem = document.querySelector("#btnRem");

// A ação que será executada quando clicar no btnAcao
function escreverAviso(){
    console.warn("Aviso!!");
}

// Atribuida a ação de click ao btnAcao
btnAcao.addEventListener("click", escreverAviso);

// Atribuida a ação de click ao btnRem
btnRem.addEventListener("click", function(){
    // Quando clicado no btnRem, ele removerá o evento do btnAcao
    // Observer que a função precisou ser declarada para podermos
    // seleciona-la novamente abaixo
    btnAcao.removeEventListener("click", escreverAviso);
})

Event.target:

É uma referência ao objeto que enviou o evento. Por exemplo, se você possui uma lista de botões, e todos estes botões possuem uma mesma ação, pode ser conveniente registrar um único manipulador de eventos para estes botões, reduzindo assim a quantidade de manipuladores individuais sobre todos estes elementos.

Exemplo:

<!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>Exemplo event.target</title>
</head>

<body>
    <table>
        <thead>Calculadora</thead>
        <tbody>
            <tr>
                <td><input type="button" name="sete" value="7"></td>
                <td><input type="button" name="oito" value="8"></td>
                <td><input type="button" name="nove" value="9"></td>
            </tr>
        </tbody>
    </table>
    <script>
        // Capturando os campos input
        let elementsArray = document.querySelectorAll("input");

        // Para cada elemento clicado
        elementsArray.forEach(function (elemento) {
            elemento.addEventListener("click", function () {
                // A função event.target imprimirá o conteúdo do elemento
                console.log("Clicked", event.target.value);
                console.log("Clicked", event.target.name);
                console.log("Clicked", event.target.type);
            });
        });
    </script>
</body>

</html>

Exercícios:

1. O código a seguir contém 2 botões, onde o botão 1 possui dois eventos, onClick e onMouseOver. Como os dois eventos não podem funcionar simultaneamente, o botão dois serve para remover o priveiro evento eventListener do botão 1.

Analisando o código abaixo, encontre e corrija os 3 erros, justificando o porquê do código não funcionar:

<!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 addEventListener</title>
</head>
<body>
    <button id="btn">Botão 1</button>
    <button id="btn2">Botão 2</button>
    <script>
        let teste = function () {
            console.log("Olá Mundo!");
        }
        document.getElementById().addEventListener('click', teste);
        document.getElementById("btn2").removeEventListener('click', () => {
            document.getElementById("btn2").removeEventListener("click", teste);
            document.getElementById("btn").addEventListener('mouseover', teste);
        });
    </script>
</body>
</html>

2. O código abaixo deve mostrar no console o texto que foi clicado. Para isso, você deverá encontrar os três erros existentes e corrigi-los. Justifique o motivo dos erros e adicione também um novo console.log que mostre qual é o ID do item que foi clicado.

<!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ício event.target</title>
</head>
<body>
    <p id="valor">Ola MundoJS!</p>
    <script>
        let elementoId = document.querySelector("#p")
            elementoId.addEventListener("onclick", function () {
                console.log("Clicou em:", event.target.value);
            });
    </script>
</body>
</html>

Gostou deste artigo? Deixe seu comentário abaixo!

Deixe um comentário