Perché non utilizzare i gestori javascript sull'elemento del corpo?

Come risposta alla domanda di 'How do you automatically set the focus to a textbox when a web page loads?', Espo suggerisce di utilizzarePerché non utilizzare i gestori javascript sull'elemento del corpo?

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

Ben Scheirman replies (senza ulteriori spiegazioni):

Qualsiasi javascript libro vi dirà di non mettere i gestori sull'elemento corpo come quello

Perché questo dovrebbe essere considerato cattive abitudini? Nella risposta di Espos, viene illustrato un problema di "override". È questa l'unica ragione, o ci sono altri problemi? Problemi di compatibilità?

fonte

2010-04-28 Alexander Torstling

L'utilizzo di sta diventando sempre meno comune perché i callback non possono essere impilati utilizzando questo metodo, vale a dire le nuove definizioni onload hanno la precedenza su quelle precedenti.

In framework moderni come jQuery e il suo .load(), i callback possono essere impilati e non ci sono conflitti quando si utilizzano script, plug-in, ecc. Diversi sulla stessa pagina.

Inoltre, è ampiamente considerato buona prassi mantenere il markup separato dal codice, quindi anche se si volesse utilizzare onload (che è perfettamente corretto se si controlla l'intero ambiente e si sa cosa si sta facendo) uno sarebbe collegare tale evento sul lato di script sia nel o un file separato javaScript head:

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

fonte

2010-04-28 11:23:44

@Pekka come potrebbe document.body.onload funzionare se il corpo non è ancora stato caricato? – systempuntoout

@system non è sicuro di cosa intendi? –

@Pekka Voglio dire, se metti document.body.onload nell'intestazione come potrebbe funzionare se il corpo non è ancora stato caricato? – systempuntoout

Suppongo che questo abbia anche a che fare con altri file javascript. Se alcuni dei tuoi file javascript contengono un gestore per il carico del corpo e se fornisci un gestore onload del corpo in linea nella tua pagina, il gestore all'interno dello script non verrà eseguito.

fonte

2010-04-28 11:21:50 rahul

Beh, '<id>' è un valore ID non valido se mi chiedete. Non userei nessun personaggio come questo.

E per buona pratica, è meglio usare window.onload IMO e posizionarlo nel tag <head>. O Meglio ancora, puoi spostarlo in un file .js e metterlo nella cache per la velocità.

fonte

2010-04-28 11:25:18 SoLoGHoST

Come una risposta più non javascript, il livello di presentazione dell'applicazione potrebbe essere sotto forma di modelli o persino di modelli nidificati (Dreamweaver o Pagine master ecc.) Dove non è richiesto o il codice specifico nel tag body può essere richiesto o conflitto con altro codice richiesto quando il modello è "ereditato"

fonte

2010-04-28 11:26:00

Non riesco a vedere altro motivo che l'eventuale override successivo, che porterebbe al tuo codice non eseguito mai. Inoltre, il javascript invadente non è più in grande considerazione.

Si dovrebbe invece assegnare una funzione che ascolta l'evento. Si può fare in questo modo:

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 affidarsi a un framework javascript, come jQuery, che avrebbe fornito la stessa funzionalità per voi.

fonte

2010-04-28 11:26:14

Non c'è niente di sbagliato con l'utilizzo dell'attributo onload nell'elemento <body>, a condizione che:

avere il controllo completo della pagina
nessun altro script che si utilizza nella pagina attualmente o potrebbe avere in il futuro tenterà di impostare un gestore onload sull'elemento body o sull'oggetto window
conosci la tua stessa mente e sei felice di avere un piccolo pezzo di sceneggiatura nel mark-up.

E 'anche interessante notare che <body onload="..."> è una parte di uno standard formale (HTML 4), mentre window.onload non è, anche se è implementato in tutti i principali browser che risale a molti anni.

fonte

2010-04-28 11:47:24

In effetti, tradizionalmente * niente * sull'oggetto 'window' era formalmente standardizzato. Questo problema viene risolto ora: HTML5 [standardizza] (http://dev.w3.org/html5/spec/Overview.html#the-window-object) questa parte del modello di oggetti del browser, incluso 'onload'. – bobince

Ignorando i problemi relativi al fatto che gli attributi di gestione eventi inline siano errati per un momento, l'evento onload non è un buon posto per mettere un autofocuser, poiché si attiva solo quando viene caricata l'intera pagina, comprese le immagini.

Ciò significa che l'utente dovrà attendere più a lungo per la messa a fuoco automatica, e se la pagina impiega un po 'di tempo a caricarsi potrebbe essere già stata messa a fuoco altrove nella pagina del browser (o chrome, come la barra degli indirizzi), solo per trovare il loro focus rubato a metà strada attraverso la digitazione. Questo è molto irritante.

L'autofocus è una funzionalità potenzialmente ostile che dovrebbe essere utilizzata con parsimonia e cortesia. In parte ciò riduce il ritardo prima della messa a fuoco e il modo più semplice per farlo è un blocco di script direttamente dopo l'elemento stesso.

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

fonte

2010-04-28 12:02:51 bobince

Molto bene che tu abbia menzionato questo fatto. Questa è una richiesta di funzionalità che ho ricevuto da molti utenti. Non so se questo ha qualcosa a che fare con il loro basso livello di esperienza, e francamente non conosco nessuna buona alternativa al trucco js. Sarebbe bello se i browser avessero la possibilità di concentrarsi sull'elemento con il tabindex più basso, che gli utenti più esperti potevano scegliere. Personalmente trovo molto fastidioso, ma non so come trovare una buona via di mezzo. –

Forse si potrebbe implementare 'focus follow gaze', poiché sembra essere quello che vogliono i miei utenti :) –

+1.Pienamente d'accordo, e ho preso in considerazione l'idea di fare questo punto, ma ho esaurito l'entusiasmo dopo aver scritto del problema "onload". –

Un altro modo di vedere le cose sta usando un addEventListener invece di usarlo come un codice html try JS:

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

    <body> 

    <script> 

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

    function funcLoad(){ 

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

    } 

    </script> 
</body>

Provatelo, potrebbe funzionare meglio rispetto ad altre soluzioni.

fonte

2016-02-27 04:18:37 NarinderRSharma

Perché non utilizzare i gestori javascript sull'elemento del corpo?

risposta

Problemi correlati