Como pegar o id do elemento que ativou o evento em JavaScript

Neste artigo você vai aprender a como pegar o id do elemento que ativou o evento em JavaScript, por exemplo: o id de um elemento que fez ativou um click

Fala programador(a), beleza? Bora aprender mais sobre eventos em JavaScript e também sobre a linguagem JS!

Para descobrir o id do elemento, primeiramente precisamos mapear um evento de click, neste caso acredito que você tenha uma gama mais ampla de elementos a disposição de um evento

Ou seja, mais de um elemento que pode disparar ele

Então após o mapeamento temos acesso ao objeto event, que tem propriedades e métodos para ajudar a trabalhar com o evento em si

No event, teremos acesso ao elemento por meio de duas possíveis propriedades: target ou srcElement

Aí podemos encapsular estas duas em uma variável e checar a propriedade id dela, que será o id do elemento

Veja o código necessário para realizar a ação:

<button id="btn1">Clique em mim</button>
<button id="btn2">Clique em mim também</button>

Aqui neste caso temos dois botões com ids diferentes, vamos mapear um evento para click em buttons

Veja o código JS agora:

document.querySelectorAll("button").forEach( function(button) {
	
    button.addEventListener("click", function(event) {

    const el = event.target || event.srcElement;

    const id = el.id;

    console.log(id);

  });
  
});

Aqui selecionamos todos os buttons e colocamos eventos neles, agora dependendo de qual você clicar vai receber como resposta: btn1 ou btn2

Que são justamente os ids dos botões

Tudo isso graças as linhas inseridas dentro do evento, que resgatam o objeto event e verificam qual o id do elemento que foi o inicializador do evento

Conclusão

Neste artigo você aprendeu a como pegar o id do elemento que ativou o evento com JavaScript

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Utilizamos o objeto event para isso, que contem métodos interessantes para trabalhar com eventos

E com a propriedade id do elemento, acessamos o id do HTML!

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Qual a diferença entre event.target e event.currentTarget?

Essa é a pegadinha que mais derruba gente nesse assunto

O event.target é o elemento que ORIGINOU o evento, ou seja, exatamente onde o clique caiu

Já o event.currentTarget é o elemento onde você registrou o listener

Nos botões do exemplo acima os dois dão no mesmo, porque o clique cai no próprio button

Mas se o botão tiver algo dentro dele, muda tudo:

<button id="btn3"><span>Clique em mim</span></button>

document.querySelector("#btn3").addEventListener("click", function (event) {
console.log(event.target.id);        // vazio, o clique caiu no span
console.log(event.currentTarget.id); // btn3
});

Se liga: o span não tem id, então event.target.id volta como string vazia

Já pegou aquele bug de "o id às vezes vem vazio"? é exatamente isso 🙂

Como pegar o id certo quando o clique cai em um elemento filho:

Quando você não consegue registrar o listener no elemento exato (ou registrou em um pai), o closest() resolve

Ele sobe na árvore a partir do event.target e devolve o primeiro elemento que bate com o seletor

document.addEventListener("click", function (event) {
const botao = event.target.closest("button");

if (!botao) return;

console.log(botao.id);
});

Tome cuidado: o closest() volta null quando o clique cai fora de qualquer button, por isso aquele if de guarda ali em cima

Sem ele você toma erro de leitura de propriedade em null no primeiro clique que der no fundo da página

Já me ferrei com isso mais de uma vez haha

Delegação de eventos: um listener no lugar de vários

No exemplo do post a gente percorre todos os buttons com forEach e coloca um listener em cada um

Funciona, mas tem um detalhe: quem entra na página DEPOIS (um botão criado por JS, uma lista que veio de uma requisição) fica de fora, porque o querySelectorAll já tinha rodado

A saída é escutar em um pai que já existe e descobrir o id lá dentro:

<div id="lista">
<button id="btn1">Clique em mim</button>
<button id="btn2">Clique em mim também</button>
</div>

document.querySelector("#lista").addEventListener("click", function (event) {
const botao = event.target.closest("button");

if (!botao) return;

console.log(botao.id);
});

Um listener só, e vale até pros botões que ainda nem existem na tela

É como deixar um porteiro na entrada do prédio em vez de um segurança em cada apartamento 😀

id não é a única opção: os data attributes

Muita gente usa o id só pra saber "qual item foi clicado", e acaba inventando id tipo produto-42, produto-43 pra depois fazer split na string

Dá pra pular essa parte inteira usando um atributo data-:

<button data-id="42">Comprar</button>
<button data-id="43">Comprar</button>

document.querySelectorAll("button").forEach(function (button) {
button.addEventListener("click", function (event) {
console.log(event.currentTarget.dataset.id);
});
});

O dataset te devolve tudo que começa com data- já em forma de objeto

data-id vira dataset.id, data-produto-nome vira dataset.produtoNome

Uma coisa pra guardar: o valor sempre chega como texto, então se você precisa de número, converte com Number()

Preciso mesmo do event.srcElement no código?

Boa pergunta pra fazer antes de sair copiando o event.target || event.srcElement

Esse || event.srcElement é um fallback: se o target vier indefinido, ele tenta a outra propriedade

Se o seu projeto não precisa atender navegador antigo, o event.target sozinho já resolve e o código fica bem mais limpo:

document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", (event) => console.log(event.target.id));
});

Repare que aqui usei arrow function

E aqui vai o aviso: dentro de arrow function o this NÃO aponta pro elemento do evento

Então se o seu código usa this.id em vez de event.target.id, mantém a function normal, beleza?

Funciona com outros eventos além do click?

Funciona sim: o event.target é do objeto de evento, não do click especificamente

Em um change ou input de formulário o esquema é igualzinho:

document.querySelectorAll("input").forEach(function (input) {
input.addEventListener("input", function (event) {
console.log(event.target.id, event.target.value);
});
});

Aí você sabe QUAL campo mudou e o que tem dentro dele, seja com um listener por campo ou com delegação no form

Mesma lógica pra submit, focus, keyup e por aí vai

Qual a diferença entre event.target e event.currentTarget?

Essa é a pegadinha que mais derruba gente nesse assunto

O event.target é o elemento que ORIGINOU o evento, ou seja, exatamente onde o clique caiu

Já o event.currentTarget é o elemento onde você registrou o listener

Nos botões do exemplo acima os dois dão no mesmo, porque o clique cai no próprio button

Mas se o botão tiver algo dentro dele, muda tudo:

<button id="btn3"><span>Clique em mim</span></button>

document.querySelector("#btn3").addEventListener("click", function (event) {
console.log(event.target.id);        // vazio, o clique caiu no span
console.log(event.currentTarget.id); // btn3
});

Se liga: o span não tem id, então event.target.id volta como string vazia

Já pegou aquele bug de "o id às vezes vem vazio"? é exatamente isso 🙂

Como pegar o id certo quando o clique cai em um elemento filho:

Quando você não consegue registrar o listener no elemento exato (ou registrou em um pai), o closest() resolve

Ele sobe na árvore a partir do event.target e devolve o primeiro elemento que bate com o seletor

document.addEventListener("click", function (event) {
const botao = event.target.closest("button");

if (!botao) return;

console.log(botao.id);
});

Tome cuidado: o closest() volta null quando o clique cai fora de qualquer button, por isso aquele if de guarda ali em cima

Sem ele você toma erro de leitura de propriedade em null no primeiro clique que der no fundo da página

Já me ferrei com isso mais de uma vez haha

Delegação de eventos: um listener no lugar de vários

No exemplo do post a gente percorre todos os buttons com forEach e coloca um listener em cada um

Funciona, mas tem um detalhe: quem entra na página DEPOIS (um botão criado por JS, uma lista que veio de uma requisição) fica de fora, porque o querySelectorAll já tinha rodado

A saída é escutar em um pai que já existe e descobrir o id lá dentro:

<div id="lista">
<button id="btn1">Clique em mim</button>
<button id="btn2">Clique em mim também</button>
</div>

document.querySelector("#lista").addEventListener("click", function (event) {
const botao = event.target.closest("button");

if (!botao) return;

console.log(botao.id);
});

Um listener só, e vale até pros botões que ainda nem existem na tela

É como deixar um porteiro na entrada do prédio em vez de um segurança em cada apartamento 😀

id não é a única opção: os data attributes

Muita gente usa o id só pra saber "qual item foi clicado", e acaba inventando id tipo produto-42, produto-43 pra depois fazer split na string

Dá pra pular essa parte inteira usando um atributo data-:

<button data-id="42">Comprar</button>
<button data-id="43">Comprar</button>

document.querySelectorAll("button").forEach(function (button) {
button.addEventListener("click", function (event) {
console.log(event.currentTarget.dataset.id);
});
});

O dataset te devolve tudo que começa com data- já em forma de objeto

data-id vira dataset.id, data-produto-nome vira dataset.produtoNome

Uma coisa pra guardar: o valor sempre chega como texto, então se você precisa de número, converte com Number()

Preciso mesmo do event.srcElement no código?

Boa pergunta pra fazer antes de sair copiando o event.target || event.srcElement

Esse || event.srcElement é um fallback: se o target vier indefinido, ele tenta a outra propriedade

Se o seu projeto não precisa atender navegador antigo, o event.target sozinho já resolve e o código fica bem mais limpo:

document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", (event) => console.log(event.target.id));
});

Repare que aqui usei arrow function

E aqui vai o aviso: dentro de arrow function o this NÃO aponta pro elemento do evento

Então se o seu código usa this.id em vez de event.target.id, mantém a function normal, beleza?

Funciona com outros eventos além do click?

Funciona sim: o event.target é do objeto de evento, não do click especificamente

Em um change ou input de formulário o esquema é igualzinho:

document.querySelectorAll("input").forEach(function (input) {
input.addEventListener("input", function (event) {
console.log(event.target.id, event.target.value);
});
});

Aí você sabe QUAL campo mudou e o que tem dentro dele, seja com um listener por campo ou com delegação no form

Mesma lógica pra submit, focus, keyup e por aí vai