Chiama più funzioni JavaScript nell'evento Onclick
-
Passaggio di funzioni come valori al parametro
onclick - Utilizzo di JavaScript discreto
-
Usando
&&e||operatori
Conosciamo molto bene l’evento onclick in javascript, che attiva una determinata funzione passata come valore all’attributo onclick. L’evento Document Object Model (DOM) di HTML è supportato per quasi tutti gli elementi HTML tranne alcuni come <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> o <title>. È comunemente usato su tag html come <div>, <button>, <li>, <span>, <a> ecc. Ma come chiamiamo più di una funzione su un clic di un <div>, <li> o di un <pulsante>. Di seguito sono riportati alcuni modi per farlo.
- Passaggio di funzioni come valori al parametro
onclick - Utilizzo di JavaScript discreto
- Usando
&&e||operatori
Passaggio di funzioni come valori al parametro onclick
Il modo più comune di utilizzare l’attributo onclick consiste nell’assegnare la funzione come valori all’attributo onclick. Lo scriviamo di solito nel codice della GUI all’interno di un tag HTML. Per passare più funzioni come valori, elencale separate da punto e virgola nell’attributo onclick di quel tag. La sintassi per esso è la seguente.
onclick = 'functionA(); functionB();'
Entrambe le funzioni verranno eseguite una dopo l’altra. Ad esempio, se usiamo il seguente codice con le funzioni funzioneA() e funzioneB(), il risultato sarà l’esecuzione sequenziale delle due funzioni nell’ordine indicato nei valori.
<div id="output" onclick="functionA(); functionB();"></div>
function functionA() {
for (let i = 0; i < 5; i++) {
console.log(i + ' Mars is a planet');
}
}
function functionB() {
for (let i = 0; i < 5; i++) {
console.log(i + ' The sky is blue');
}
}
Uscita:
0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue
Osservazioni
- L’esecuzione di più funzioni con
onclickè supportata su tutti i browser Web e per la maggior parte degli elementi HTML. È un metodo chiaro e conciso per chiamare più funzioni. - L’esecuzione della funzione è sequenziale. Pertanto, è possibile pianificare la sequenza in cui devono essere effettuate le chiamate al metodo elencando le funzioni di conseguenza.
- Invece di usare il punto e virgola dopo il nome di una funzione, possiamo anche separarli con una virgola. Significa che anche
onclick = "function1(), function2()"è una sintassi valida. - C’è uno svantaggio nell’usare più funzioni passate in un evento
onclick. Se uno dei metodi passati come parametri fallisce a causa di qualche eccezione, interrompe l’intera catena. E tutte le funzioni successive non verranno eseguite. - L’uso di
onclicknei tag rende il codice leggibile. Non manipoliamo il DOM non viene manipolato. Significa che specifichiamo le funzioni in modo statico nell’HTML. Quindi, non aggiungiamo alcuna funzione all’eventoonclickdell’elemento DOM in fase di esecuzione. Il browser analizza l’HTML e può associare gli eventi di clic in fase di analisi.
Utilizzo di JavaScript discreto
Un altro modo per passare funzioni nell’onclick in JavaScript è aggiungere ascoltatori onclick nel codice JavaScript. In questo metodo, troviamo l’elemento target e colleghiamo la nostra funzione all’evento onclick di quell’elemento. L’approccio non invadente è un modo di programmazione in cui manteniamo gli eventi javascript nel codice js e l’HTML include solo la pagina statica (Fare riferimento qui per ulteriori informazioni). Di seguito è riportato il modo discreto di chiamare più funzioni sull’evento click.
let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);
Produzione:
0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue
Osservazioni
- Le funzioni vengono eseguite in sequenza ma non sono dipendenti. Quindi, se una funzione non viene eseguita, il resto delle funzioni non viene bloccato a differenza del caso in
onclick="functionA(), functionB()". - Possiamo aggiungere più funzioni con questo metodo. Per rimuovere dinamicamente una funzione già aggiunta, dobbiamo utilizzare il
removeEventListener. La sintassi è la seguente.
element.removeEventListener('click', alertFirst);
- Sarà difficile eseguire il debug della funzionalità poiché l’HTML non mostrerà le funzioni collegate con l’
onclickdell’elemento HTML. I metodi sono mappati all’eventoonclickin fase di esecuzione durante la compilazione del codice javascript. - Questo metodo di aggiunta di
onclickin fase di esecuzione offre la flessibilità di eseguire funzioni in modo intelligente in base alla logica di business, poiché l’associazione viene eseguita in fase di compilazione in fase di esecuzione.
Usando && e || operatori
Si possono includere più funzioni separate da && e || operatori. Le funzioni dovrebbero avere un tipo restituito booleano. Di solito, utilizziamo questo approccio quando è necessario decidere su alcune condizioni e quindi eseguire la funzione prevista. Se queste condizioni richiedono controlli logici complessi o lunghi, è preferibile crearli come funzioni e mantenerli all’interno del codice js per rendere l’HTML snello e leggibile. Il codice seguente approfondisce l’uso.
<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>
function isValidPage(pageNumber) {
let pageNum = parseInt(pageNumber);
let maxPagesCount = 10;
let isValidPageNumber = false;
if (!isNaN(pageNum)) {
if (pageNum > 1 && pageNum < maxPagesCount) {
isValidPageNumber = true;
}
}
return isValidPageNumber;
}
function fetchPageDetails(pageNumber) {
// Call Backend service to get the detils
}
Nel codice sopra la funzione fetchPageDetails() verrà chiamata solo dopo che la funzione isValidPage() restituirà true. In sostanza, l’operatore && fa in modo che la funzione fetchPageDetails() venga eseguita solo se il pagenumber è valido.
Osservazioni
- In questo metodo, l’esecuzione delle funzioni è sequenziale. Segue la logica come codice usando il
&&e il||operatori. Se un metodo fallisce a causa di eccezioni, non esegue le funzioni rimanenti. - Possiamo utilizzare questo metodo nei casi in cui abbiamo funzioni con tipi restituiti booleani o tipi che corrispondono all’operatore logico utilizzato nel codice.
- Poiché specifichiamo le funzioni nell’attributo click dell’elemento HTML, questo metodo è un modo statico di dichiarare più funzioni. Non creiamo associazioni di runtime.