Búsqueda de sitios web

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

Sé que esto es una mala práctica. No escribas código así si es posible evitarlo.

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

Estoy realizando esta consulta con el interés de comprender completamente qué sucede (y los posibles inconvenientes) cuando se escribe algo como esto:

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

Hasta donde puedo decir, esto es funcionalmente lo 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>

Extrayendo de esto, parece que la cadena asignada al atributo onclick se inserta dentro de una función anónima que se asigna al manejador de clic del elemento. ¿Es realmente así?

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

Lo cual funciona. Pero no sé qué tan hack es esto. Parece sospechoso porque no hay ninguna función aparente que se esté devolviendo.

Podrías preguntar, ¿por qué estás haciendo esto, Steve? ¡El JS en línea es una mala práctica!

Bueno, para ser completamente honesto, estoy cansado de editar tres secciones diferentes de código solo para modificar una sección de una página, especialmente cuando solo estoy prototipando algo para ver si funcionará en absoluto. 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 justo dentro del elemento: cuando decido 2 minutos después que esto fue una idea terrible, terrible, puedo eliminar todo el div (o lo que sea) y no tengo un montón de misterioso JS y CSS sobrante flotando en el resto de la página, ralentizando el renderizado apenas un poco. Esto es similar al concepto de localidad de referencia, pero en lugar de fallos de caché estamos mirando errores y bloat de código.

Respuesta #1

Lo tienes casi correcto, pero no has tenido en cuenta el valor de this suministrado 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 manejadores de eventos en línea establecen this igual al objetivo del evento. También puedes usar funciones anónimas en scripts en línea

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

Respuesta #2

Lo que hace el navegador cuando tienes

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

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

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

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

Respuesta #3

Parece que se está difundiendo mucha mala práctica en los Atributos de Manejo de Eventos. La mala práctica es no conocer y usar las funciones disponibles donde son más apropiadas. Los Atributos de Eventos son estándares completamente documentados por la W3C y no hay nada de mala práctica en ellos. No es diferente a colocar estilos en línea, que también están documentados por la W3C y pueden ser útiles en ciertos momentos. Ya sea que los coloques dentro de etiquetas de script o no, se van a interpretar de la misma manera.

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

Artículos relacionados