¿Cuál es la mejor manera de ejecutar algunos JS inmediatamente después de cargar un elemento?

Digamos que tienes algo de HTML,¿Cuál es la mejor manera de ejecutar algunos JS inmediatamente después de cargar un elemento?

<input id="mytextbox" type="text" value="hello world" />

Y usted quiere hacer un poco de magia en ese cuadro de texto tan pronto como se carga. Tal vez agregue algún tipo de widget o botón al lado, lo que sea. Hay 2 formas de hacer esto de las que soy consciente. Se puede tirar un poco de jQuery como este en el <head>

$(function() { 
    $('#mytextbox').magic(); 
});

Y eso va a funcionar una vez que la totalidad de DOM está listo, pero lo que si queremos que antes? ¿Tan pronto el elemento se cargó?

Podemos poner el JS inmediatamente después del elemento:

<input id="mytextbox" type="text" value="hello world" /> 
<script> 
    $('#mytextbox').magic(); 
</script>

Pero eso es un desordenado poco, y por qué tenemos que buscar en todo el DOM para un ID de elemento cuando sabemos exactamente dónde está? Los eventos onclick tienen un argumento this. ¿No hay alguna forma en que podamos hacer algo como esto ...

<input id="mytextbox" type="text" value="hello world" onload="$(this).magic()" />

? Sería la mejor solución de IMO, pero solo el cuerpo tiene un evento onload aparentemente, y ningún otro evento parece adecuado. ¿Nos queda básicamente la solución n. ° 2 si queremos que una parte del código se ejecute inmediatamente después de cargar un elemento?

Fuente

2011-03-10 mpen

En realidad, su segundo fragmento es el "mejor" (lo que sea que eso signifique, probablemente más rápido) forma de aplicar Javascript a un elemento.

<input id="mytextbox" type="text" value="hello world" /> 
<script type="text/html"> 
    $('#mytextbox').magic(); 
</script>

No busca: todo el DOM aquí. Una llamada como esta se reduce directamente a

document.getElementById('mytextbox');

que es más o menos, solo acceso de insta al nodo. De todos modos, una práctica como esta delata la idea de Javascript discreto. No sabría por qué no debería aplicar algún código cuando se activa el evento DOMContentLoaded (que es abstraído por jQuerys .ready()).

Fuente

2011-03-10 08:23:35 jAndy

¿Qué sucede si tiene una página muy grande y algunos widgets de entrada mejorados con JS en la parte superior de la página? Acaba de hacerlos inutilizables hasta que se haya cargado toda la página. O tal vez algún evento importante debe activarse cuando realiza la acción X, pero se perdió el evento porque estaba esperando que el DOM se cargue para agregar sus manejadores. – mpen

¿Y asume que los navegadores utilizan algún tipo de diccionario/hashmap para buscar elementos por ID? Sería lógico que lo hicieran, pero quién sabe. Sería bueno si pudiéramos vincular y evento/función a un elemento al mismo tiempo que se está creando: sin búsqueda, y sin demora. – mpen

Dado que javascript includes generalmente son de bloqueo (a menos que lo cargue async por supuesto), siempre es una buena idea poner su javascript lo más bajo posible en la página. De esta forma, el usuario no tendrá que esperar a que su javascript se cargue mientras navega por la página.

Así que la pregunta aquí es, ¿de verdad quieres que se cargue inmediatamente después de ese elemento. O simplemente en la parte inferior de la página.

Fuente

2011-03-10 08:24:28 Wolph

Sí. Esa era específicamente la suposición que estaba haciendo; que yo * do * quiero que se cargue inmediatamente. Para cosas menos importantes, seguro, póngalos en la parte inferior de la página, pero si necesita disparar lo antes posible, entonces debería disparar lo antes posible. – mpen

@Mark: en ese caso, colóquelo justo debajo del elemento. – Wolph

¿Cuál es la mejor manera de ejecutar algunos JS inmediatamente después de cargar un elemento?

Respuesta

Cuestiones relacionadas