Como definir EventListener para elementos dinâmicos criados no javascript

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 divbtnList“. 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.

Imagem 1: Executando o arquivo “index.html” e criando 3 novos botões dinamicamente

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:

Imagem 2: Executando a ação de um elemento criado dinamicamente

Espero que tenham gostado desse conteúdo.

Abs!

É 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.

Posts relacionados

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *