2

Se eu crio um botão...

<button id="btn" value="fui eu">Clique Aqui</button>

o evento...

document.getElementById("btn").onclick = function(e){ console.log("Quem clicou "+e.target.value) };

Funciona legal!

Mas se eu inserir uma imagem...

<button id="btn" value="fui eu"><img src="iconelegal.jpeg" /></button>

...aí não funciona porque o target é o bitmap e não o button, já que fica à frente e é onde de fato se clica. Faz sentido, mas não resolve o problema! Acho que uma vez eu resolvi isso com uma gambiarra procurando o parente certo, mas agora gostaria de saber a maneira correta de fazer isso. Alguém sabe?

EDIT: corrigi a correção automática... Nesse caso específico, e.target.parentNode vai achar o botão, existiria uma forma mais genérica?

2
  • a julgar que você na hora de escrever o tópico errou acidentalmente o parametro id de btn para bin, e que em seu código está tudo certo, mas que o erro persiste, veja esse mesmo código no fsfiddle funcionando (com img dentro do botão)
    – user49127
    Commented 1/07/2016 às 2:45
  • Corrigi o corretor que muda o btn para bin. O exemplo retorna undefined. Como escrevi acima agora, nesse caso se resolve com e.target.parentNode, mas se eu inserir um objeto mais complexo já não vai funcionar de novo. Não existe como saber a origem do evento?
    – Gustavo
    Commented 1/07/2016 às 2:56

2 Respostas 2

4

Quando adicionas um auscultador de eventos a um elemento a funcão que será chamada corre com esse elemento como contexto. Isso quer dizer que o this dentro dessa função é o elemento ao qual adicionaste o auscultador de evento.

Essa função recebe automaticamente um argumento, o evento que ocorreu e que fez com que a função fosse invocada. Esse evento é um objeto com várias propriedades, uma das quais o .target que é o elemento onde o evento começou.

Vejamos este exemplo de HTML:

section
    div
       span 

onde span está dentro de div que por sua vêz está dentro de section.

Quando fazes:

section.addEventListener('click', function(e){

essa função vai ser corrida sempre que houver um click no section mas também num dos seus descendentes. Na verdade todos os elementos pais cuja descendência tenha um evento disparado vêm os seus addEventListeners a serem chamados também. Podes evitar isso invocando e.preventPropagation(); dentro da função. Fora esse à parte, e voltando ao exemplo em cima essa função vai ter como thissempre o section e como e.target sempre o elemento que receber o click.

Dá uma olhada a este exemplo (link), onde crio uma maneira de verificar isso:

var section = document.querySelector('section');
section.addEventListener('click', handler(section));

function handler(elComAuscultador) {
    return function(e) {
        var target = e.target.tagName.toLowerCase();
        var self = this.tagName.toLowerCase();
        var log = [
            'Clicaste no elemento ' + target,
            'O this é o elemento ' + self,
            'this == elComAuscultador é verdadeiro? ' + (this == elComAuscultador ? 'sim' : 'não')
        ];
        alert(log.join('\n'));
    }
}
body > * {
    padding: 50px;
}

section {
    background-color: blue;
}

div {
    background-color: yellow;
}

p {
    background-color: red;
    width: 100px;
    height: 100px;
}
<section>section
    <div>div<p>span</p></div>
</section>

Aplica-se a mesma lógica usando section.onclick = function(e){ (exemplo) mas com uma diferença fatal, é que este método elemento.onclick = function(){ só permite um por elemento e sobreescreve todos os outros (exemplo), enquanto que o elemento.addEventListener permite quantos auscultadores quiseres, e chama todos quando o evento acontecer.

2
  • 1
    caso ele resolva implementar a interface EventListener, o this deixará de ser o objeto DOM para ser o objeto que implementa a interface, porém neste caso, o event.currentTarget continua à aponta para o DOM à que o evento foi atrelado, enquanto o event.target vai apontar para o DOM que ativou o evento. Commented 1/07/2016 às 14:45
  • Com certeza ele (eu) vai querer implementar via EventListener, obrigado por complementar a resposta, espero que o Sergio acrescente na dele para deixa-la ainda mais completa.
    – Gustavo
    Commented 4/07/2016 às 22:52
2

Respondendo de forma objetiva,

Nesse código:

document.getElementById("btn").onclick = function(e){ console.log("Quem clicou "+e.target.value) };

Troque por:

document.getElementById("btn").onclick = function(e){ console.log("Quem clicou "+this.value) };

Resumo: Apenas modifique e.target.value por this.value

1
  • Valeu Daniel, só não marquei a tua resposta como a correta porque tinha que escolher uma, e a outra estava mais completa.
    – Gustavo
    Commented 4/07/2016 às 22:53

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 .