¿Cómo funciona Javascript en línea (en HTML)?

Sé que esta es una mala práctica. No escriba código como este si es posible.

Por supuesto, siempre nos encontraremos en situaciones en las que un fragmento inteligente de Javascript en línea puede solucionar un problema rápidamente.

Estoy siguiendo esta consulta con el interés de comprender completamente lo que sucede (y las posibles dificultades) cuando se escribe algo como esto:

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

Por lo que puedo decir, esto es funcionalmente el mismo 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 de esto, parece que la cadena asignada al atributo onclickse inserta dentro de una función anónima que se asigna al controlador de clic del elemento. ¿Es este realmente el caso?

Porque estoy empezando a hacer cosas como esta:

<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! --> 

Que funciona Pero no sé cuánto de esto es un hack. ¡Parece sospechoso porque no hay una función aparente de la que se está devolviendo!

Puedes preguntar, ¿por qué haces esto, Steve? ¡Inline JS es una mala práctica!

Bueno, para ser honesto, estoy cansado de editar tres secciones diferentes de código solo para modificar una sección de una página, especialmente cuando estoy creando prototipos de algo para ver si funciona. Es mucho más fácil y, a veces, incluso tiene sentido que el código específicamente relacionado con este elemento HTML se defina directamente dentro del elemento: cuando decido 2 minutos más tarde que esta fue una idea terrible, terrible, puedo bombardear todo el div (o lo que sea ) y no tengo un montón de misterioso JS y CSS cruft en el resto de la página, lo que ralentiza el renderizado muy ligeramente. Esto es similar al concepto de localidad de referencia, pero en lugar de errores de caché, estamos viendo errores e hinchazón de código.

Lo tiene casi correcto, pero no ha tenido en cuenta el thisvalor proporcionado al código en línea.

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

en realidad está más cerca 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>

Los controladores de eventos en línea son thisiguales al objetivo del evento. También puede usar la función anónima en el script en línea

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

Lo que hace el navegador cuando tienes

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

es establecer el valor real de "onclick" en algo efectivamente como:

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

Es decir, crea una función que espera un parámetro de "evento". (Bueno, IE no; es más como una simple función anónima simple).

Parece que hay muchas malas prácticas en torno a los atributos del controlador de eventos. Una mala práctica es no conocer y utilizar las funciones disponibles donde es más apropiado. Los atributos del evento son estándares totalmente documentados por el W3C y no hay nada de malo en ellos. No es diferente a colocar estilos en línea, que también está documentado por W3C y puede ser útil en ocasiones. Ya sea que lo coloques envuelto en etiquetas de script o no, se interpretará de la misma manera.

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

La mejor manera de responder a su pregunta es verla en acción.

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

En el js

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

Como puede ver en el console, si está usando Chrome, imprime una función anónima con el objeto de evento pasado, aunque es un poco diferente en IE.

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

Estoy de acuerdo con algunos de sus puntos sobre los controladores de eventos en línea. Sí, son fáciles de escribir, pero no estoy de acuerdo con su punto de tener que cambiar el código en varios lugares, si estructura bien su código, no debería necesitar hacer esto.

¡Parece sospechoso porque no hay una función aparente de la que se está devolviendo!

Es una función anónima que se ha adjuntado al evento de clic del objeto.

¿Por qué haces esto, Steve?

¿Por qué demonios estás haciendo ...? Ah, no importa, como has mencionado, realmente es una mala práctica ampliamente adoptada :)

Prueba esto en la consola:

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

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

div.onclick

En Chrome, muestra esto:

function onclick(event) {
  alert(event)
}

... y la namepropiedad no estándar de div.onclickes "onclick".

Entonces, si esto es anónimo o no, depende de su definición de "anónimo". Compare con algo como var foo = new Function(), donde foo.namehay una cadena vacía, y foo.toString()producirá algo como

function anonymous() {

}