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?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeNo 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?
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);
});
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.
15/06/2014 às 3:29