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

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!