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

Question

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

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

estoy persiguiendo esta consulta en aras de la plena comprensión de lo que sucede (y los peligros potenciales) cuando algo como esto está escrito:

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

Por lo que yo puedo decir que 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 esta parece que la cadena asignada a atribuir onclick se inserta dentro de una función anónima que se asigna al controlador click 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 trabaja. Pero no sé cuán pirata es esta. ¡Parece sospechoso porque no hay una función aparente de la que se está devolviendo!

Puedes preguntar, ¿por qué estás haciendo esto, Steve? Inline JS es una mala práctica!

Bueno, para ser sincero, 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 en el elemento: cuando decido 2 minutos después que esta fue una idea terrible y terrible, puedo destruir el div completo (o lo que sea) y no tengo un montón de misteriosos 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 fallas en el caché, estamos viendo errores y bloat de código.

Answer 1

Lo tiene casi correcto, pero no ha contabilizado el valor this suministrado al código en línea.

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

es en realidad 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> 

Inline controladores de eventos establecen this igual al destino del evento.

Answer 2

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

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

¿por qué haces esto, Steve?

¿Por qué diablos se le doi ..... Ah importa, como se ha mencionado, lo que realmente es adoptado ampliamente mala práctica :)

Answer 3

Lo que hace el navegador cuando se tiene

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

es fijar el valor real de "onclick" a algo efectivamente como:

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

es decir, se crea una función que espera un "evento" pa rameter. (Bueno, IE no, es más como una simple función anónima simple.)

Answer 4

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

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

En el js

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

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

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

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

Answer 5

Prueba esto en la consola:

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

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

div.onclick 

En Chrome, que muestra esto:

function onclick(event) { 
    alert(event) 
} 

... y el name propiedad no estándar de div.onclick es "onclick".

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

function anonymous() { 

} 

Answer 6

Parece que hay una gran cantidad de mala práctica se lanza alrededor de controlador de eventos atributos. La mala práctica es no conocer y usar las funciones disponibles donde sea más apropiado. Los atributos del evento son completamente documentados por el W3C y no hay nada malo en ellos. No es diferente a colocar estilos en línea, que también está documentado en W3C y puede ser útil en ocasiones. Ya sea que lo ubiques envuelto en etiquetas de scripts o no, se interpretará de la misma manera.

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