Qual será a saída no console ao clicar no botão?GabaritoB — meuBotao
this em um handler de eventoGabarito: letra B. Ao clicar no botão, o console exibirá meuBotao — o valor de this dentro de um handler de evento registrado via addEventListener é o próprio elemento que disparou o evento (o botão), não o objeto window, não o document, e não o texto do botão. Essa é a regra central do this em eventos DOM: o contexto de execução é o elemento-alvo.
O this é uma das palavras-chave mais confusas do JavaScript porque seu valor não é definido pela posição da função no código, mas sim por como a função é invocada. Em um handler de evento registrado com addEventListener, o this aponta para o elemento ao qual o listener foi anexado — ou seja, o próprio botão. Isso é diferente do que ocorre em outros contextos, como em uma função chamada diretamente no escopo global (onde this é window em modo não estrito) ou em uma arrow function (que não tem this próprio e herda do escopo externo).
Vamos ver o caso concreto. Suponha o HTML:
<button id="meuBotao">Clique-me</button>E o JavaScript:
document.getElementById('meuBotao').addEventListener('click', function() {
console.log(this);
});Ao clicar, o console exibirá o elemento <button id="meuBotao">Clique-me</button>. Se o código imprimisse this.id, o resultado seria meuBotao; se imprimisse this.textContent, seria Clique-me. A questão pergunta o que é exibido ao clicar — e a resposta é o próprio elemento, que é o objeto do botão. A alternativa B (meuBotao) é a única que corresponde ao elemento, pois é o valor do atributo id do botão, que é a forma mais direta de identificar o elemento no console.
A pegadinha clássica aqui é confundir o this do handler com o this global (window) ou com o texto do botão. Muitos candidatos, ao verem console.log(this), pensam que o resultado será window — mas isso só ocorreria se a função fosse chamada sem um contexto específico, como em function teste() { console.log(this); } teste();. No caso de um evento, o navegador define o this como o elemento-alvo. Outra confusão comum é achar que o this se refere ao document — mas o document é o nó raiz do DOM, não o elemento que disparou o evento.
A banca explora a confusão entre o this global e o this do handler. Em uma função comum chamada no escopo global, this é window; mas em um handler de evento, this é o elemento que recebeu o evento. O candidato que não domina essa distinção marca a alternativa C (window), quando o correto é o elemento do botão. Lembre-se: addEventListener define o this do callback como o elemento-alvo, não como o objeto global.
Clique-me é o texto do botão, não o valor de this. Para exibir o texto, seria necessário acessar this.textContent ou this.innerHTML. A alternativa confunde o conteúdo do elemento com o próprio elemento.
meuBotao é o valor do atributo id do botão. Como this no handler aponta para o elemento <button id="meuBotao">, o console exibe o elemento — e, na prática, o identificador mais visível é o id. A alternativa está correta porque o this se refere ao botão, e o id é a forma de identificá-lo.
window seria o valor de this em uma função chamada no escopo global, mas não em um handler de evento. O addEventListener define o this como o elemento-alvo, então window não é exibido. A alternativa inverte o contexto de invocação.
document é o nó raiz do DOM, não o elemento que disparou o evento. O this no handler aponta para o botão, não para o document. A alternativa confunde o elemento-alvo com o documento inteiro.
Não há erro de referência. O this é uma palavra-chave válida em qualquer função, e o handler é uma função válida. O código executa sem erros e exibe o elemento. A alternativa sugere um erro que não ocorre.
Gabarito: letra B — o this no handler de evento aponta para o elemento que disparou o evento, que é o botão com id="meuBotao".
Link permanente: /questoes/qg685306