O JavaScript possibilita a execução de funções quando ocorre determinado evento dentro do DOM do nosso HTML. Esse evento pode ser um “clique” em determinado elemento (geralmente botão), a seleção de uma “option” dentro de uma combo, ou mesmo o carregamento (load) da página.
Além disso, outro recurso interessante e bastante utilizado no JavaScript é a possibilidade de criação de elementos (inputs, divs, links ou qualquer outro tipo de componente do HTML) de forma dinâmica (também através de eventos).
Para executar uma determinada função a partir da ocorrência de um evento, precisamos defini-lo (adicionar) no “EventListener” do componente. No exemplo à seguir eu mostro um simples documento HTML (index.html), que possui:
- um botão para adicionar elementos (novos “buttons“) dinamicamente
- o “Button 1” estático, que já é exibido por padrão na página
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rafaelWendel.com</title> <style> .btn { display: block; margin-bottom: 10px; } </style> </head> <body> <button id="btnAdd">Add button</button> <hr /> <div id="btnList"> <button class="btn">Button 1</button> </div> <script src="scripts.js"></script> </body> </html> |
Esse arquivo faz a importação do arquivo “scripts.js“, que é onde fazemos a implementação dos códigos para criar novos elementos (buttons) dinamicamente.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var counter = 1; function addNewButton() { counter++; //create a new element let newButton = document.createElement('button'); //define the "btn" class newButton.classList.add('btn'); //define the button text newButton.innerText = "Button " + counter; //add the new element to "btnList" div document.getElementById("btnList").append(newButton); } window.onload = function(){ //define the EventListener to the "btnAdd" click let btnAdd = document.getElementById('btnAdd'); btnAdd.addEventListener('click', addNewButton); createBtnEventListener(); } |
A função “addNewButton” cria um elemento dinamicamente e o insere (append) dentro da div “btnList“. Essa função será chamada (executada) sempre que o botão “btnAdd” for clicado (definido na linha 22). Perceba que todos os novos botões que são criados, possuem a classe “btn” (linha 10).
Executando esse “index.html”, e clicando 3 vezes no “btnAdd“, temos o seguinte resultado.
Até aqui tudo tranquilo. Definimos uma ação para quando o evento de clique do “btnAdd” ocorrer. Mas, e se quisermos definir uma ação para quando um dos botões “btn” for clicado. Por exemplo, quando clicar em um dos botões que foram gerados dinamicamente, ele exibe um alerta com o texto do respectivo botão.
Esse procedimento também é relativamente simples. Mas temos que entender 2 coisas
- precisamos definir o EventListener para um conjunto de elementos que possuem a mesma classe (classe “btn”)
- sempre que um novo elemento é criado dinamicamente, temos que definir o EventListener para os elementos da classe novamente (pois esse novo elemento também precisa ter a sua ação de clique definida =)
Sendo assim, no meu arquivo “scripts.js”, eu criei 2 novas funções: “alertBtn” (linha 22) e “createBtnEventListener” (linha 28).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | var counter = 1; function addNewButton() { counter++; //create a new element let newButton = document.createElement('button'); //define the "btn" class newButton.classList.add('btn'); //define the button text newButton.innerText = "Button " + counter; //add the new element to "btnList" div document.getElementById("btnList").append(newButton); //call the function to refresh the EventListener createBtnEventListener(); } function alertBtn() { let msg = this.innerText; alert(msg); } function createBtnEventListener() { //get all ".btn" elements (in array format) let btn = document.querySelectorAll('.btn'); for(let item of btn){ item.addEventListener('click', alertBtn); } } window.onload = function(){ //define the EventListener to the "btnAdd" click let btnAdd = document.getElementById('btnAdd'); btnAdd.addEventListener('click', addNewButton); createBtnEventListener(); } |
A função “createBtnEventListener” é responsável por criar o EventListener de todos os botões com classe “.btn” que existirem no documento. Todos esses botões são retornados em formato de “array” (linha 31) e eu preciso percorrer esse array para poder definir um por um o EventListener.
Por fim, veja que essa função é chamada em 2 pontos distintos:
- No momento em que a página é carregada pela primeira vez (linha 42, dentro do window.onload),
- Dentro da função “addNewButton“. Ela é chamada aqui, para que os novos elementos (botões) criados de forma dinâmica (após o carregamento da página) também funcionem.
Sendo assim, após criar alguns elementos dinamicamente, e clicar no “Button 3”, temos o seguinte resultado:
Espero que tenham gostado desse conteúdo.
Abs!
Rafael Wendel Pinheiro
É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.
