Dove dichiarare i gestori di eventi: Markup o Script?

Question

Dove dichiarare i gestori di eventi: Markup o Script?

#1 da (2 voti)
#2 da (0 voti)

2

Se il gestore di eventi è dichiarato nel markup, sarebbe (tipo) di aggiungere la logica di presentazione all'HTML.

<button id="btn" onClick="foo()">Click Me!</button>

Se il gestore di eventi è dichiarato nello script, sarebbe (tipo) difficile da guardare il codice e capire quale pulsante fa.

document.getElementById('btn').onclick=foo;

Esistono best practice per questo scenario?

Il motivo di questa domanda è che stavo collegando i gestori di eventi sul caricamento della pagina tramite lo script. Tuttavia, mi sono imbattuto in un problema in cui l'elemento DOM potrebbe non essere presente quando la pagina viene caricata (sto usando l'associazione if di KnockoutJS) e l'evento non è associato al gestore. Per collegare il gestore come e quando la condizione if è soddisfatta complicherebbe ulteriormente il codice. Quindi ora sto pensando di spostare i miei gestori sul bind click . Quali potrebbero essere le potenziali insidie e quali migliori pratiche dovrei seguire per evitarli?

html javascript

posta Fa773N M0nK 08.07.2015 - 12:01

fonte

2 risposte

Leggi altre domande sui tag html javascript

Come gestire un numero elevato di parametri di configurazione in un programma concettualmente? Qual è il middleware (se esiste) nel servizio web consumato da un sito web?

score 2 · Answer 1

Non c'è giusto o sbagliato in questo, entrambe le cose vanno bene. Ci sono alcune cose da considerare che rendono l'uno o l'altro migliori nell'una o nell'altra situazione.

E in realtà, ci sono almeno tre modi per assegnare i gestori di eventi:

Uso di un attributo del gestore di eventi in HTML, come questo:
```
<button id="buttonSave" onClick="save()">Save</button>
```

Usando uno script per impostare la proprietà, in questo modo:

<button id="buttonSave">Save</button>

document.getElementById("buttonSave").onclick = save;

Modifica dei gestori di eventi utilizzando addEventListener()

document.getElementById("buttonSave").addEventListener("onclick", save);

Ecco il percorso decisionale che uso.

Un sacco (> ~ 20) di elementi condivide lo stesso gestore - > 2. o 3., perché farlo in JavaScript salverà i byte, e nel caricamento della pagina il traffico è più lento di JavaScript.
Sono necessari più gestori per un singolo elemento
- Il gestore deve essere aggiunto o rimosso dinamicamente - > 3. addEventListener ()
- Il gestore non cambia - > 1. HTML
Un solo gestore sufficiente
- Il gestore deve essere aggiunto o rimosso dinamicamente - > 2. JavaScript
- Il gestore non cambia - > 1. HTML

Il problema che descrivi può effettivamente essere risolto spostando il codice JavaScript che installa i gestori in una funzione JavaScript che a sua volta è installata come onload handler, quindi JavaScript verrà eseguito solo quando il DOM è pronto per questo. Potrebbe ancora esserci una "condizione di competizione" (non nel senso di concorrenza ma nel senso di sequenza) quando altri JavaScripts eseguono e modificano il DOM. Per evitare ciò, di solito non installo più gestori di onload , ma solo un singolo gestore che chiama tutte le funzioni che devono essere eseguite durante onload nella sequenza richiesta.

score 0 · Answer 2

If the event handler is declared in the script, it'd be (kind-of) hard to look at the code and figure out what button does.

Hai risposto alla tua domanda.

La registrazione del gestore nel codice JS separa il markup dalla logica che è sempre una proprietà desiderabile.