6

No document há três <div>, todas com o evento onclick que chama uma função.

Ao clicar em alguma das três, gostaria de capturar o id da <div> clicada.

Como posso capturar o id desse elemento?

1
  • Implementação inteligente, diminui muito a codificação 12/10/2016 às 16:55

1 Resposta 1

17

Se você estiver usando JavaScript inline (como em <div id="a" onclick="f()">...), não dá. Você precisaria passar o id na própria chamada de função. Mas usar JS inline é contraindicado, não só por isso mas também porque é uma mistura de estrutura (HTML) e comportamento (JS).

Se estiver criando o listener do evento por JavaScript, basta usar this.id:

var div = document.getElementById('seuid');
div.onclick = function() {
    alert(this.id); // alerta 'seuid'
} 
// OU:
div.addEventListener('click', function() {
    alert(this.id); // alerta 'seuid'
});

Considerando seu comentário que esclarece que se trata de um menu com vários itens clicáveis: delegue o tratamento do evento para um elemento mais acima na hierarquia, e obtenha o item clicado do objeto evento que é passado automaticamente para o listener. Exemplo:

<ul id="fora">
    <li id="dentro1">aaaaaa</li>
    <li id="dentro2">aaaaaa</li>
    <li id="dentro3">aaaaaa</li>
</ul>
var el = document.getElementById('fora');
el.addEventListener('click', function(e) {
    alert(e.target.id);
});

http://jsfiddle.net/3Uuv5/

4
  • tipo, na sua resposta você definiu o objeto com o getElementById(), mas eu não sei em qual id o usuario vai clicar, tipo, esses tres divs seriam itens de menu, e eu quisesse aplicar um efeito quando esse item fosse clicado, tenho criar um evento pra cada um? 15/06/2014 às 3:08
  • Não, tem um jeito melhor de fazer nesse caso. Veja meu update na resposta.
    – bfavaretto
    15/06/2014 às 3:20
  • Perfeito, muito obrigado. Só uma duvida, na parte nova da sua resposta onde que fica especificado que é para pegar o id dos elementos interiores? 15/06/2014 às 3:26
  • 1
    O e é o tal "objeto evento" passado automaticamente. e.target é o elemento que disparou o evento (o elemento clicado). e.target.id é o id desse cara. E this.id seria o id do ul, sempre.
    – bfavaretto
    15/06/2014 às 3:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .