¿Por qué no utilizar los controladores de JavaScript en el elemento del cuerpo?

Como una respuesta a la cuestión de 'How do you automatically set the focus to a textbox when a web page loads?', Espo sugiere el uso de¿Por qué no utilizar los controladores de JavaScript en el elemento del cuerpo?

<body onLoad="document.getElementById('<id>').focus();">

Ben Scheirman replies (sin más explicaciones):

Cualquier Javascript libro le dirá que no poner manipuladores en el elemento del cuerpo así

¿Por qué sería esto considerado? mala práctica ed? En la respuesta de Espos, se ilustra un problema de 'anulación'. ¿Es esta la única razón, o hay algún otro problema? Problemas de compatibilidad?

Fuente

2010-04-28 Alexander Torstling

Usando onLoad es cada vez menos y menos común porque las devoluciones de llamada no se pueden apilar con este método, es decir, nuevos onload definiciones anulan los antiguos.

En marcos modernos como jQuery y su .load(), las devoluciones de llamadas se pueden apilar y no hay conflictos al usar scripts, complementos, etc. diferentes en la misma página.

Además, es ampliamente considerado buena práctica para mantener el margen de beneficio de separar el código, por lo que incluso si uno quiere usar onload (que está perfectamente bien si controlas el entorno completo y sabe lo que está haciendo) una se uniría ese evento en el lado de secuencias de comandos, ya sea en el o un archivo separado javaScript head:

window.onload = function() { document.getElementById...... }

Fuente

2010-04-28 11:23:44

@Pekka ¿cómo podría document.body.onload funcionar si el cuerpo no está cargado todavía? – systempuntoout

@system no estoy seguro de lo que quiere decir? –

@Pekka Quiero decir, si coloca document.body.onload en el encabezado, ¿cómo podría funcionar si el cuerpo aún no está cargado? – systempuntoout

supongo que esto tiene que ver con otros archivos javascript también. Si algunos de sus archivos javascript contienen un controlador para la carga del cuerpo, y si proporciona un controlador de carga en línea del cuerpo en su página, entonces el manejador dentro del script no se ejecutará.

Fuente

2010-04-28 11:21:50 rahul

Bueno, '<id>' es un valor ID no válido si me preguntas. No usaría ningún personaje como este.

Y por una buena práctica, es mejor utilizar window.onload OMI y colocarlo en la etiqueta <head>. O Mejor aún, puede moverlo a un archivo .js y guardarlo en caché para obtener mayor velocidad.

Fuente

2010-04-28 11:25:18 SoLoGHoST

Como una respuesta no relacionada con javascript, la capa de presentación de su aplicación podría ser en forma de plantillas o incluso plantillas anidadas (Dreamweaver o Master Pages, etc.) donde no se requiera tener un código específico en la etiqueta body conflicto con otro código necesario cuando la plantilla se "hereda"

Fuente

2010-04-28 11:26:00

puedo ver por ninguna otra razón que la posible anulación posterior, lo que llevaría a su código no se está ejecutando. Además, el javascript obtuso ya no es muy apreciado.

su lugar, debe asignar una función detectando el evento. Puede hacerlo de esta manera:

function onloadFocus() { 
    document.getElementById('<id>').focus(); 
} 

if (window.addEventListener) {  
    window.addEventListener('load', function(e) {onloadFocus();}, false);} 
else if (window.attachEvent) { 
    window.attachEvent('onload', function(e) {onloadFocus();}); 
}

... o confiar en un marco de JavaScript, como jQuery, que proporcionaría la misma funcionalidad para usted.

Fuente

2010-04-28 11:26:14

No hay nada malo en usar el atributo onload en el elemento <body>, siempre y cuando:

tiene un control completo de la página
ningún otro script que utilice en la página actualmente o podría tener en el futuro intentará establecer un controlador onload en el elemento del cuerpo o el objeto window
que conoce por sí mismo y está contento de tener un pequeño fragmento de script en su marcado.

Es también digno de mención que <body onload="..."> es una parte de una norma oficial (HTML 4), mientras que window.onload no es, a pesar de que se implementa en todos los principales navegadores que se remonta muchos años.

Fuente

2010-04-28 11:47:24

De hecho, tradicionalmente * nada * sobre el objeto 'window' estaba formalmente estandarizado. Esto se soluciona ahora: HTML5 [estandariza] (http://dev.w3.org/html5/spec/Overview.html#the-window-object) esta parte del modelo de objetos del navegador, que incluye 'onload'. – bobince

Sin tener en cuenta los problemas de si los atributos del controlador de eventos en línea son erróneos por un momento, el evento onload es un lugar inadecuado para colocar un autoenfoque, ya que solo se dispara cuando se carga toda la página, incluidas las imágenes.

Esto significa que el usuario tendrá que esperar más para que ocurra el enfoque automático, y si la página tarda bastante tiempo en cargarse, es posible que ya se haya enfocado en la página del navegador (o cromo, como la barra de direcciones). solo para encontrar su enfoque robado a la mitad del tipeo. Esto es muy irritante.

El enfoque automático es una característica potencialmente hostil que se debe usar con moderación y cortesía. Parte de eso es reducir el retraso antes de enfocar, y la forma más fácil de hacerlo es un bloque de scripts directamente después del elemento en sí.

<input id="x"> 
<script type="text/javascript"> 
    document.getElementById('x').focus(); 
</script>

Fuente

2010-04-28 12:02:51 bobince

Muy bien que menciones este hecho. Esta es una solicitud de función que recibí de muchos usuarios. No sé si esto tiene algo que ver con su bajo nivel de experiencia y, francamente, no conozco ninguna buena alternativa al truco js. Sería genial si los navegadores tuvieran la opción de enfocarse en el elemento con el tabindex más bajo, que los usuarios más experimentados podrían optar por no usar. Personalmente, me resulta muy molesto, pero no sé cómo encontrar una buena vía intermedia. –

Tal vez se podría implementar 'focus follows gaze', ya que eso parece ser lo que mis usuarios quieren :) –

+1.Totalmente de acuerdo, y consideré hacer este punto, pero me quedé sin entusiasmo después de escribir sobre el tema de 'carga'. –

Otra manera de mirar que está utilizando un addEventListener en lugar de usarlo como un código html try JS:

<body onLoad="document.getElementById('<id>').focus();"> 

    <body> 

    <script> 

    document.body.addEventListener('load', funcLoad); 

    function funcLoad(){ 

    document.getElementById('<id>').focus(); 

    } 

    </script> 
</body>

Inténtelo hacia fuera, que podría funcionar mejor que otras soluciones.

Fuente

2016-02-27 04:18:37 NarinderRSharma

¿Por qué no utilizar los controladores de JavaScript en el elemento del cuerpo?

Respuesta

Cuestiones relacionadas