Eventos JS en HTML

[_cronos2]

Creo que el título no es muy explicativo, así que voy a explicar a qué me refiero. Cuando agrego un evento directamente sobre el tag:

Código HTML:

<div onclick="funcion();">Haz click aquí</div>
 

Uso un string, y además "invoco" la función con (), algo que contrasta con la forma de hacerlo desde JS:

Código Javascript:

div.onclick = funcion;
 

Así que deduzco que, aunque internamente, se tiene que usar una especie de eval para parsear el contenido del atributo. Así que la pregunta es: ¿es más lento agregar los eventos directamente en el HTML que hacerlo desde JS (debido a ese posible uso de eval)? Y si no, ¿cómo hace JS para poder parsear esa declaración del evento?
Saludos (:

[Aijoona]

Dudo que sea más costoso el handler inline que uno creado programaticamente (asumiendo que es menos costoso obtener una referencia de un objeto JS que de un nodo del DOM).

De igual manera la ventaja de usar handlers externos es de diseño, ya que te permite separar la vista del comportamiento.

[maycolalvarez]

de acuerdo con @Aijoona, además de todas formas cuando la pagina es cargada debe de interpretarse todo el JS embebido, y es por practicas de diseño que es mucho más conveniente separar el JS embebido así como separamos el diseño con CSS

[Artificium]

Pues te diré que no se usa ningún eval, porque aquí hay dos dimensiones distintas, para HTML "funcion()" es una cadena, pero esa cadena es la puerta de entrada al intérprete JavaScript. y es como si estuviera escrito en un archivo JS a parte, de hecho dentro de esas comillas puedes escribir lo que quieras de JavaScript y será válido, hasta crear una función o cualquier otro objeto. Se usa un eval cuando hay comillas dentro de JavaScript, para aclarar las cosas te diré cuando se usa eval dentro de una declaración de evento dentro del HTML, digamos en este caso:

<button onclick="var variable = eval('{uno: 1, dos : 2, tres : 3}');">Botón</button>

Para HTML la cadena será esto: var variable = eval('{uno: 1, dos : 2, tres : 3}');, pero para JavaScript la única cadena será esto: '{uno: 1, dos : 2, tres : 3}' y en este caso si se aplica un eval. Hay otros casos donde también se aplica un eval aunque no se vea, por ejemplo cuando usas un setTimeout o un setInterval, pero sólo si lo usas de esta manera:

setTimeout("mifuncion()", 100);

como verás aquí si hay comillas dentro de JavaScript y es necesario aplicar eval, pero también podrías evitar el odioso eval, de este modo:

setTimeout(mifuncion, 100);

obviamente tendríamos que definir mifuncion, y en este caso solo se ejecutaría el objeto Function sin usar ningún eval, lo mismo para setInterval.

Bueno, con eso termino esta pequeña aclaración. Espero que te haya servido.

[_cronos2]

Mmm bueno, ya, supongo que tardaré en comprender del todo cómo se hace, pero ya sabiendo que no se usa eval la principal duda la tengo solucionada.
Saludos y gracias :D

[Tecna]

Buenas,

como ya se ha dicho para HTML todo son cadenas pero en el caso de los manejadores de eventos son cadenas de javascript, (así que me queda la duda de que no se use eval), el intérprete cuando se carga la página crea una función anónima con el contenido del atributo del evento. Se puede comprobar así:

Código HTML:

<a href="#" id="cadena" onclick="alert(typeof this.onclick); alert(typeof this.id);">aqui</a>
 

Casi diría que si que usa eval porque he probado a quitar las comillas del atributo onclick y daba error de sintaxis y eval si lo que recibe como argumento no es una cadena primitiva no intenta convertirlo y da error.

Una cosa que no se ha dicho es que las funciones se ejecutan en el ámbito que se definen y si se definen como atributo el ámbito es distinto. Por eso a veces puede no ser exactamente lo mismo que si se hace en un archivo diferente, cuanto menos código haya en el atributo mejor, porque la función anonima que se crea con el valor del atributo tiene un ámbito mas complejo y si no se tiene cuidado puede causar problemas al redefinir metodos por error o poder recorrer el arbol, por ejemplo.

Otra cosa que también se ha comentado es que al hacerlo como atributo habría que asignarlo a cada elemento en el documento html con lo que resulta más tedioso cualquier cambio en el código. Pero además los atributos no se pueden modificar, sólo se puede modificar la propiedad del objeto element del DOM con lo que si necesitáramos modificarlo dinamicamente como atributo no podríamos y al redefinir la propiedad anularíamos el posible valor que tuviera el atributo.

[_cronos2]

Muchas gracias por tu aporte, siempre es bueno ver las dos opiniones. Lo de la función es como me imaginaba, mi "teoría" era que hacía algo como esto:

Código Javascript:

element.onclick = function(){ eval('codigo_inline'); };
 

Bueno y como veo que todos lo dicen, mi pregunta no era por qué es mejor declarar los evento desde JS que hacerlo inline, eso ya lo sé
Saludos (: