Vanilla Javascript - #19 Eventos e Polimorfismo

10/05/2019

Na aula de hoje daremos sequência ao aprendizado de eventos, abrangendo também o polimorfismo, ou seja, métodos iguais com resultados diferentes.

Polimorfismo

No javascript conseguimos trabalhar com polimorfismo. No exemplo abaixo criamos uma mesma função para receber informações dos button e exibimos resultados diferentes para o usuário:

No html criamos 03 botões com a mesma classe:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Events</title>
</head>

<body>

    <button id="btn" class="button" data-color="red">Red</button>
    <button id="btn2" class="button" data-color="green">Green</button>
    <button id="btn3" class="button" data-color="blue">Blue</button>

    <script src="javascript.js"></script>
</body>
</html>

No JS selecionamos esses botões com o querySelectorAll e definimos ações de click para o botão com resultados diferentes:

(function readyJS(win,doc){
    'use strict';

    let btn=doc.querySelectorAll(".button");
    let body=doc.querySelector("body");

    //Change body colors
    function changeColors(event)
    {
        body.style.backgroundColor=event.target.dataset.color;
    }

    for(let i=0; i < btn.length; i++){
        btn[i].addEventListener("click", changeColors,false);
    }
})(window, document);

Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #18 Eventos

Nesta aula trabalharemos com eventos. Eventos são a base do Javascript, pois são eles que permitem a interatividade com os usuários e a troca de informações.

Vanilla Javascript - #20 Delegação de Eventos

Na aula de hoje vamos aprender sobre delegação de eventos no Javascript. �? muito importante entender essa técnica principalmente quando criamos elementos novos

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.