🏯 Usare campi personalizzati con gli eventi in JavaScript

Quando sviluppiamo interfacce web, spesso abbiamo la necessità di associare informazioni aggiuntive a un elemento della pagina e recuperarle in risposta a un evento. In questo articolo vedremo come aggiungere campi personalizzati (custom field) agli elementi del DOM, come usarli nei gestori di eventi e quali alternative standard offre HTML con i data-* attribute.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

Introduzione

Quando lavoriamo con JavaScript e gli eventi sul DOM, ogni nodo del DOM è un oggetto: ciò significa che, oltre alle proprietà già esistenti, possiamo aggiungerne di nuove e recuperarle nel gestore eventi. Il codice seguente ne è un esempio pratico:


let myElement = document.getElementById("my-element"); 
myElement.customField_1 = "Hello"; 
myElement.customField_2 = "World!"; 
myElement.addEventListener('click', myElementListener);

function myElementListener(event){
    let customField_1 = event.currentTarget.customField_1;
    let customField_2 = event.currentTarget.customField_2;

    console.log(`${customField_1} ${customField_2}`);
}

Come funziona il codice

Selezione dell’elemento
```
let myElement = document.getElementById("my-element");
```
Recuperiamo l’elemento DOM con id="my-element".
Aggiunta di campi personalizzati
```
myElement.customField_1 = "Hello"; 
myElement.customField_2 = "World!";
```
Qui vengono aggiunte due nuove proprietà direttamente all’oggetto HTMLElement. In JavaScript, gli oggetti sono dinamici, quindi possiamo estenderli in qualsiasi momento.
Registrazione di un event listener
```
myElement.addEventListener('click', myElementListener);
```
Quando l’elemento verrà cliccato, verrà eseguita la funzione myElementListener.
Recupero dei campi personalizzati all’interno del listener
```
let customField_1 = event.currentTarget.customField_1;
let customField_2 = event.currentTarget.customField_2;
```
event.currentTarget si riferisce all’elemento a cui è associato l’event listener. In questo modo accediamo alle proprietà personalizzate impostate in precedenza.
Output
Alla pressione dell’elemento:
```
Hello World!
```
verrà stampato in console.

Quando può essere utile

Passare dati personalizzati a un gestore di eventi senza ricorrere a variabili globali.
Associare a un elemento informazioni aggiuntive calcolate a runtime.
Mantenere legati dati e comportamento nello stesso oggetto DOM.

Buone pratiche

Anche se funziona, questa tecnica non è sempre la più consigliata per i progetti a lungo termine:

Può creare confusione con altre proprietà native dell’oggetto.
Non è standardizzato nei nomi, e rischia conflitti con librerie esterne.

Alternativa consigliata: usare gli HTML data attributes.

Esempio:

<div data-custom-field-1="Hello" data-custom-field-2="World" id="my-element"></div>

e in JavaScript:

let myElement = document.getElementById("my-element");
let field1 = myElement.dataset.customField1;
let field2 = myElement.dataset.customField2;

Data attribute e dati dinamici

Inoltre i data-* attribute funzionano benissimo anche con valori dinamici, perché puoi leggerli e modificarli via JavaScript nello stesso modo in cui modifichi qualsiasi altra proprietà dell’elemento.

Esempio con valori dinamici

let myElement = document.getElementById("my-element");

// Impostare valori dinamici
myElement.dataset.customField1 = "Hello";
myElement.dataset.customField2 = "World";

// Event listener
myElement.addEventListener("click", (event) => {
    let field1 = event.currentTarget.dataset.customField1;
    let field2 = event.currentTarget.dataset.customField2;
    console.log(`${field1} ${field2}`);
});

Perché può essere meglio rispetto a proprietà personalizzate

Compatibilità e leggibilità
Tutti gli sviluppatori conoscono i data-*, quindi il codice è più immediato per chi lo legge.
Persistenza
Se il DOM viene serializzato (ad esempio in outerHTML), i data-* restano nei tag HTML, mentre le proprietà aggiunte dinamicamente no.
CSS e selettori
Puoi anche selezionare elementi in CSS in base ai data-*:
```
[data-custom-field-1="Hello"] {
    color: red;
}
```
Nessun rischio di sovrascrivere proprietà native
Non esiste il pericolo di chiamare accidentalmente una proprietà già definita da HTML/DOM API.

💡 Quando scegliere proprietà personalizzate (come visto all'inzio dell'articolo)

Quando i dati sono puramente temporanei e non devono essere visibili o esportati in HTML.
Quando vuoi evitare di “sporcare” il markup con attributi.

💡 Quando scegliere data-*

Quando i dati devono essere accessibili sia a JavaScript che al markup (e magari anche a CSS).
Quando vuoi che i valori sopravvivano a operazioni di serializzazione del DOM.
Quando serve leggibilità per altri sviluppatori.

Conclusione

L’aggiunta di campi personalizzati direttamente sugli elementi DOM è possibile e può essere comoda in scenari rapidi o di prototipazione.

Tuttavia, per codice più manutenibile e leggibile, conviene preferire approcci standard come i data-* attributes.

Conoscere entrambe le tecniche permette di scegliere l’approccio migliore per ogni situazione.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog