TL;DR
O elemento que contém o attribute listener é usado para derivar o escopo da função que será executada. Por isso que as propriedades do elemento (como textContent
, value
etc) podem ser acessadas diretamente — porque fazem, literalmente, parte do escopo da função.
Ressalto que esta resposta vale somente para attribute event handlers (isto é, aqueles definidos diretamente em atributos no HTML). Eventos adicionados via addEventListener
funcionam (similarmente) de outro jeito. Não há modificação do escopo da função passada ao segundo argumento de addEventListener
.
Cada evento a ser ouvido no navegador possui um struct associado, chamado Event Handler
[1], que contém um campo listener
(que corresponde ao ouvidor de eventos) e outro campo, value
. No caso dos eventos adicionados através de atributos no HTML, o value
desse struct corresponde ao que a especificação chama de internal raw uncompiled handler.
Esse internal raw uncompiled handler é uma tupla contém as seguintes informações: [2]
- O corpo do script (não compilado — "uncompiled"), que é o código que está inserido no valor do atributo.
- A localização de onde o script se originou, no caso de um erro precisar ser reportado.
Uma vez que o listener é acionado, o navegador procede à avaliação (compilação) do script, que será utilizado para a criação da função callback
(que será executada). Para a criação dessa função, leva-se em conta este algoritmo [3], que faz uso da operação interna OrdinaryFunctionCreate
(do ECMAScript).
A OrdinaryFunctionCreate
é uma operação interna do ECMAScript com a seguinte assinatura:
OrdinaryFunctionCreate (functionPrototype, ParameterList, Body, thisMode, Scope)
Ela é usada para criar a função callback
. Para isso, os seguintes argumentos são passados:
functionPrototype
⇒ é o Function.prototype
(já somos familiarizados com esse protótipo com as outras funções do JavaScript, que também o assumem).
ParameterList
⇒ no caso de eventos que não são erros (como onclick
, onkeydown
etc), corresponde a event
.
Body
⇒ o corpo da função é gerado dinamicamente através de concatenações com o nome do evento e o corpo. É, basicamente:
function <<name>>(event) {
<<body>>
}
Em que <<name>>
é o nome da função callback associada ao evento (como onclick
) e <<body>>
é o código JavaScript adicionado no atributo de evento no HTML.
thisMode
⇒ passa-se "non-lexical-this".
Scope
⇒ O escopo é definido da seguinte forma:
- Inicialmente, o escopo o objeto
document
;
- Se o elemento que possui o attribute event listener está dentro de um formulário (possui um form owner), o objeto do formulário também é incorporado ao ecopo;
- Se o elemento que possui o attribute event listener é não nulo, o objeto desse elemento também é incorporado ao escopo.
Desse modo, pode-se afirmar que o escopo surge através dessa tripla derivação (document → form owner → eventTarget
). Por isso que, inteiramente, o escopo não será igual ao this
.
Consulte o algoritmo completo para saber mais.
Uma vez que a função callback
esteja criada, ela é executada. Para essa invocação, o this
é definido como o elemento que contém o event attribute[4].
Conclusão
Concluímos, portanto, que valores como value
, textContent
(e todas as outras propriedades presentes no elemento que ativou o evento) são acessíveis "diretamente" desse jeito pois estão escopo da função callback
criada pelo navegador. O conceito de escopo é explicado na MDN.
Não confundir escopo com this
, que, a grosso modo, é apenas mais um nome do escopo de uma função.
Mesmo se o "this
implícito" fosse possível em JavaScript (o que não é), o exemplo a seguir demonstra o porquê desse não ser o caso (há uma diferença entre o this
e o valor do escopo):
<form>
<button type="button" onclick="
console.log({
this_elements: typeof this.elements, // undefined
scoped_elements: typeof elements, // object
are_eql: this.elements === elements // false
})
">
Clique
</button>
</form>
<h3>Explicação</h3>
Mesmo que fosse possível em JavaScript, o "<code>this</code>
implícito" não poderia ocorrer nessa situação, já que há uma
evidente (demonstrada acima) diferença de valores.
O escopo da função, criado a partir do documento, formulário
pai (se presente) e, enfim elemento associado ao
<em>attribute event</em>, é diferente do <code>this</code>
da função, que corresponde (ao contrário do escopo)
unicamente ao elemento associado ao <em>attribute event</em>.
Isso acontece porque, quando a função callback (criada conforme expliquei acima) é invocada, seu this
é definido como o elemento que contém o attribute event listener. Já o escopo (definido durante a criação dessa função callback) é criado a partir da derivação do objeto document
, do form owner (se presente) e do próprio elemento referente ao evento. São, pois, diferentes.
Como isso acontece?
Explicado acima.
Isso está especificado?
Sim. As referências para a especificação estão no texto.
Além de (aparentemente) todas as propriedades de Event.target
estarem disponíveis, posso acessar mais algum valor?
Na verdade (ao contrário do que eu inicialmente pensei), não é o event.target
que é "colocado" como escopo, mas sim o elemento que contém o event attribute (o elemento associado ao evento). O event.target
nem sempre a ele corresponderá.
Qual o suporte disso nos navegadores?
Os navegadores que seguem a especificação implementam isso e, portanto, suportam o que aqui foi discutido. A implementação varia entre host, já que a especificação não se preocupa em ditar como fazer, mas sim o que fazer.
Referência
this
aonde qualquer o objeto é o elemento DOM e os eventos são partes da interface "estendida", logovalue
é o mesmo que chamarthis.value
, para um teste rápido<input onkeyup="console.log(this)" />
, outro teste com uma propriedade de um objeto Element<input onkeyup="console.log(tagName)" />
ou<input onkeyup="console.log(outerHTML)" />
, resumindo, esse é o comportamento natural em diversas interfaces usadas em JS, já oarguments
eEvent
não tem haver com o objeto diretamente sobre o teste comonkeyup="console.log(value)"
this.value
, por exemplo. Se fizer(function() { console.log(value); }).call({ value: 50 })
dará erro. Ainda mantenho a pergunta principal de como esse acesso "implícito" é possível. E eu sei que oarguments
não tem a ver com isso, utilizei-o somente para fins de demonstração.this
pode ser "implícito", não é algo absoluto JavaScript, é do "HTML" (note as aspas). Não estou citando fonte técnica e nem especificação de linguagem, o teste é prático, o "implícito" só quer dizer que em HTML (dependendo de como usa nos atributos*on
) othis
não precisará ser escrito (ou seja esta "implícito")this
, no JS, não é implícito (como você sabe), então ainda não consigo explicar ao certo. Aparentemente, realmente as propriedades dothis
são "espalhados" para o escopo do attribute listener, mas ainda não encontrei referência para isso. Você tem alguma fonte que corrobore essa sua última afirmação?