• Programmazione » Javascript » Tutorial Javascript

Pagina 2 di 2

Gestione degli eventi tramite Object Model: addEventListener/ attachEvent

Quest'ultima è decisamente la modalitàmigliore per registrare un evento in quanto:

• può essere utilizzato con qualsiasi elemento del DOM e non solo con gli elementi HTML
• fornisce una gestione migliore del codice eseguito in corrispondenza dello scatenarsi di un evento (capturing vs. bubbling)
• consente di gestire più handler per lo stesso evento; ciò è particolarmente utile nello sviluppo di librerie generiche (o di Web User Control), dove una gestione degli eventi tramite markup o puntatori a funzione potrebbe creare problemi di sovrascrittura di handler impostati direttamente dalla pagina o da altri controlli/librerie (immaginiamo ad esempio il tipico caso di inizializzazione di un componente che richiede il load completo del DOM: associarlo sovrascrivendo l'evento onload del body potrebbe compromettere l'esecuzione del resto della pagina!)

Lo standard W3C prevede l'uso di:

target.addEventListener(type, listener, useCapture);

Dove:

• target: l'oggetto di cui si desidera intercettare l'evento
• type: la stringa che rappresenta il tipo di evento da intercettare
• listener: l'oggetto che riceve la notifica quando l'evento viene scatenato; deve implementare l'interfaccia EventListener oppure, più semplicemente, essere un punatore ad una funzione JavaScript.
• useCapture: se "true" tutti gli eventi del tipo specificato saranno gestiti dal listener indicato prima di venir iniviati agli elementi nella gerarchia del DOM; per maggiori dettagli si rimanda a DOM Level 3 Events

In Microsoft Internet Explorer anzichéaddEventListener si utilizza:

bSuccess = object.attachEvent(sEvent, fpNotify);

Dove:

• object: l'oggetto di cui si desidera intercettare l'evento
• sEvent: la stringa che rappresenta il tipo di evento da intercettare
• fpNotify: il punatore alla funzione JavaScript che si desidera invoca allo scatenarsi dell'evento.
• bSuccess: (ritorno) un valore booleano che indica se l'evento è stato correttamente associato alla funzione specificata

È dunque importante notare come l'Object Model diDHTML dipenda fortemente dalla piattaforma utilizzata(tipicamente dal browser in cui viene caricato il documento);per la realizzazione di applicazioni indipendenti dallapiattaforma è dunque necessario utilizzare solo glielementi (oggetti, collezioni, metodi, proprietà edeventi) pienamente supportati da tutti i browser diriferimento.

Per implementare correttamente la gestione degli eventiutilizzando il DOM è dunque necessario affidarsi ad uncontrollo basato sulle browser-capabilities:

<input type="button" value="Hello" id="btnHello3" /><script type="text/javascript">var btn = document.getElementById("btnHello3");if (btn.addEventListener)    btn.addEventListener("click" , HelloWorld, false);else if (btn.attachEvent)    btn.attachEvent("onclick" , HelloWorld);function HelloWorld(){    alert("Hello World!");}</script>

In modo analogo è possibile rimuovere un eventhandler utilizzando removeEventListener (W3CStandard) oppure detachEvent (Internet Explorer).

Come già accennato in precedenza, uno dei vantaggimaggiori derivanti dall'uso di addEventListener (oattachEvent nel caso di IE) è che permette diassociare handler ad eventi già intercettati senzacomprometterne il funzionamento:

<input type="button" value="Hello" id="btnHello4" onclick="alert('onclick da markup');" /><script type="text/javascript">var btn = document.getElementById("btnHello4");if (btn.addEventListener)    btn.addEventListener("click" , function(){alert("onclick da addEventListener");}, false);else if (btn.attachEvent)    btn.attachEvent("onclick" , function(){alert("onclick da attachEvent");});</script>

esegue correttamente sia il codice associato all'evento"onclick" da markup, sia quello associato tramiteDOM