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 this
sempre 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.
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)