Como o Javascript embutido (em HTML) funciona?

Eu sei que isso é uma má prática. Não escreva códigos como este, se possível.

Obviamente, sempre nos encontraremos em situações em que um snippet inteligente de Javascript embutido pode solucionar um problema rapidamente.

Estou buscando esta consulta no interesse de entender completamente o que acontece (e as possíveis armadilhas) quando algo assim é escrito:

<a href="#" onclick="alert('Hi')">Click Me</a>

Até onde eu sei, isso é funcionalmente o mesmo que

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

Extrapolando disso, parece que a string atribuída ao atributo onclick é inserida em uma função anônima que é atribuída ao manipulador de cliques do elemento. Este é realmente o caso?

Porque estou começando a fazer coisas assim:

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

O que funciona. Mas eu não sei o quanto isso é um hack. Parece suspeito porque não há nenhuma função aparente que está sendo retornada!

Você pode perguntar, por que está fazendo isso, Steve? JS embutido é uma prática ruim!

Bem, para ser sincero, estou cansado de editar três seções diferentes de código apenas para modificar uma seção de uma página, especialmente quando estou apenas criando um protótipo de algo para ver se funcionará. É muito mais fácil e, às vezes, até faz sentido que o código especificamente relacionado a esse elemento HTML seja definido dentro do elemento: Quando eu decido, 2 minutos depois, que essa foi uma ideia terrível, terrível, eu posso destruir a div inteira (ou qualquer outra coisa) ) e não tenho um monte de mistérios misteriosos de JS e CSS no resto da página, diminuindo a renderização. Isso é semelhante ao conceito de localidade de referência, mas, em vez de erros de cache, estamos observando bugs e inchaço do código.

Você está quase correto, mas não contabilizou o thisvalor fornecido ao código embutido.

<a href="#" onclick="alert(this)">Click Me</a>

é realmente mais perto de:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

Manipuladores de eventos embutidos definidos como thisiguais ao destino do evento. Você também pode usar a função anônima no script embutido

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

O que o navegador faz quando você tem

<a onclick="alert('Hi');" ... >

é definir o valor real de "onclick" para algo efetivamente como:

new Function("event", "alert('Hi');");

Ou seja, ele cria uma função que espera um parâmetro "evento". (Bem, o IE não; é mais uma função anônima simples).

Parece haver muitas práticas ruins sendo lançadas em torno dos Atributos do Manipulador de Eventos. A prática recomendada é não conhecer e usar os recursos disponíveis onde for mais apropriado. Os atributos do evento são padrões totalmente documentados pelo W3C e não há nada de ruim nas práticas. Não é diferente de colocar estilos em linha, que também é documentado pelo W3C e pode ser útil em alguns momentos. Se você o colocar em tags de script ou não, será interpretado da mesma maneira.

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

A melhor maneira de responder sua pergunta é vê- la em ação.

<a id="test" onclick="alert('test')"> test </a> ​

Nos js

var test = document.getElementById('test');
console.log( test.onclick ); 

Como você vê no console, se você estiver usando o Chrome, ele imprime uma função anônima com o objeto de evento passado, embora seja um pouco diferente no IE.

function onclick(event) {
   alert('test')
}

Concordo com alguns de seus pontos de vista sobre manipuladores de eventos em linha. Sim, eles são fáceis de escrever, mas não concordo com o seu ponto de precisar alterar o código em vários locais; se você estruturar bem o seu código, não precisará fazer isso.

Parece suspeito porque não há nenhuma função aparente que está sendo retornada!

É uma função anônima que foi anexada ao evento click do objeto.

por que você está fazendo isso, Steve?

Por que diabos você está doi ... Ah, deixa pra lá, como você mencionou, é realmente uma prática ruim amplamente adotada :)

Tente isso no console:

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

No Chrome, mostra o seguinte:

function onclick(event) {
  alert(event)
}

... e a namepropriedade não padrão de div.onclické"onclick" .

Portanto, se isso é ou não anônimo, depende da sua definição de "anônimo". Compare com algo como var foo = new Function(), onde foo.nameé uma string vazia, e foo.toString()produzirá algo como

function anonymous() {

}