Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavascritpCamp 2009 Simone (Demo) Gentili Javascript Camp – 25 Settembre 2009 Listener per eventi
DOM Events <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><li>Liste...
DOM Events / (1/2) I  DOM events  permettono a linguaggi di programmazione come  Javascript , JScript, EcmaScript, Java, V...
DOM Events / (2/2) <ul><li>L'esecuzione di codice Javascript in risposta ad  un  evento  rimane una delle funzionalità che...
DOM Level 2 <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><li>List...
DOM Level 2 / intro / (1/6) <ul><li>E' interessante notare che anche  Microsoft ha partecipato allo sviluppo delle specifi...
DOM Level 2 / modello DOM / (2/6) Quando viene caricato, un documento HTML viene trasformato in una struttura di oggetti j...
DOM Level 2 / i nodi / (3/6) Ciascun elemento viene rappresentato tramite un  nodo (tag ...)  e ci sono diversi tipi di no...
DOM Level 2 / i nodi / (4/6) document  è un nodo sempre presente a prescindere da che cosa contiene il documento stesso. P...
DOM Level 2 – testi – (5/6) Tutto quello che non è compreso tra  parentesi angolari , viene considerato  nodo testuale ; I...
DOM Level 2 – attributi – (6/6) I nodi degli attributi   sono sempre associati ad un elemento , è ovvio che non possiamo a...
Gestori di Eventi <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><l...
Gestori di Eventi - (1/7) Il modo più semplice per gestire gli eventi con del codice javascript, è quello di usare gli  ev...
Gestori di Eventi - (2/7) Quando siamo di fronte ad un codice HTML come mostrato di seguito e facciamo click sul link: <a ...
Gestori di Eventi - (3/7) Usare i  gestori di eventi  è una soluzione pratica e veloce quando si deve programmare. In oltr...
Gestori di Eventi - (4/7) var link = document.getElementById(&quot;idlink&quot;); link.onclick = function () { alert(&quot...
Gestori di Eventi - (5/7) Quando usiamo il  gestore di eventi  per assegnare la seconda alert, in realtà si sovrascrivono ...
Gestori di Eventi - (6/7) Soluzione generale … var link = document.getElementById(&quot;idlink&quot;); link.onclick = func...
Gestori di Eventi - (7/7) Dentro le funzioni script1 e script2  l'attributo this non farà più riferimento all'elemento  ch...
Listener per Eventi <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul>...
Listener per Eventi - (1/5) Sono  come i gestori di eventi , tranne per il fatto che ad essi  si possono assegnre più list...
Listener per Eventi - (2/5) Come i gestori di eventi, i listener sono  una funzione javascript che viene connessa ad un no...
Listener per Eventi - (3/5) elemento . addEventListener (“ evento ”,  listenerPerEventi , false); addEventListener  accett...
Listener per Eventi - (4/5) Per  Internet Explorer  le cose sono leggermente differenti: elemento . attachEvent (“on event...
Listener per Eventi - (5/5) Come distinguere le due implementazioni If ( typeof  elemento .addEventListener != “undefined”...
Azioni Predefinite <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><...
Azioni predefinite - (1/3) <a href=”...” onclick=”javascript:return false;”>...</a> Per  bloccare  l' azione predefinita  ...
Azioni predefinite - (2/3) Per bloccare l'evento di default basta richiamare l'evento  preventDefault();  sull'elemento: c...
Azioni predefinite - (3/3) In  Internet Explorer  l' oggetto evento non viene passato come argomento al listener, ma viene...
Propagazione di Eventi <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><...
Propagazione di Eventi – (1/5) Gli eventi, attraversano l'intera struttura del  DOM  ed il meccanismo si chiama  propagazi...
Propagazione di Eventi – (2/5) Nella  fase di cattura , l'evento percorre tutto il DOM da document fino all'elemento che h...
Propagazione di Eventi – (3/5) Il metodo  attachEvent  di  Internet Explorer  non prevede il terzo parametro, proprio perc...
Propagazione di Eventi – (4/5) Nella  fase di target  il browser ha raggiunto il nodo DOM dell'elemento cui è stato associ...
Propagazione di Eventi – (5/5) Per interrompere la propagazione di un evento è sufficente richiamare il metodo  stopPropag...
I problemi di memoria in IE (1/1) In  internet Explorer , la memoria occupata per un listenere non viene rilasciata nemmen...
Riepilogo – (1/2) Internet Explorer utilizza  attachEvent  /  detachEvent  al posto di  addEventListener  /  removeEventLi...
Riepilogo – (2/2) Per bloccare un evento InternetExplorer richiede di impostare la proprietà  cancelBubble  mentre invece ...
I framework javascript Prototype: Event.observe(elemento, “evento”, listenerPerEventi); Event.stopObserving(elemento, “eve...
This is the end: faq?
Upcoming SlideShare
Loading in …5
×

Javascript Camp - Listener Per Eventi

2,210 views

Published on

Come funziona il binding degli eventi con il DOM2.

Published in: Technology
  • Be the first to comment

Javascript Camp - Listener Per Eventi

  1. 1. JavascritpCamp 2009 Simone (Demo) Gentili Javascript Camp – 25 Settembre 2009 Listener per eventi
  2. 2. DOM Events <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><li>Listener per eventi; </li></ul><ul><li>Azioni predefinite; </li></ul><ul><li>Propagazione di eventi; </li></ul>
  3. 3. DOM Events / (1/2) I DOM events permettono a linguaggi di programmazione come Javascript , JScript, EcmaScript, Java, VBScript di registrare degli event handler/listener in dei nodi di elementi all'interno do un albero DOM . Un albero DOM lo possiamo ritrovare all'interno di documenti, per esempio, html , xhtml , xul, svg.
  4. 4. DOM Events / (2/2) <ul><li>L'esecuzione di codice Javascript in risposta ad un evento rimane una delle funzionalità che sono oggetto di implementazioni differenti tra i vari browser . </li></ul><ul><li>Per combattere contro queste diversità, il W3C ha provato a standardizzare il modello ad eventi nel DOM Level 2 . </li></ul>
  5. 5. DOM Level 2 <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><li>Listener per eventi; </li></ul><ul><li>Azioni predefinite; </li></ul><ul><li>Propagazione di eventi; </li></ul>
  6. 6. DOM Level 2 / intro / (1/6) <ul><li>E' interessante notare che anche Microsoft ha partecipato allo sviluppo delle specifiche del DOM Level2; </li></ul><ul><li>Al rilascio di Internet Explorer 5.5, Microsoft ha deciso di non supportare le specifiche all'interno del suo Browser. </li></ul><ul><li>Lo stesso vale per le release successive ovvero la 6.0 e la 7.0 … 8.0; </li></ul>
  7. 7. DOM Level 2 / modello DOM / (2/6) Quando viene caricato, un documento HTML viene trasformato in una struttura di oggetti javascript chiamata modello DOM ; $(document).ready(); // we love jquery =) Ogni elemento , compresi gli attributi, diviene un oggetto . Javascript può accedere a questi oggetti per modificarne la struttura.
  8. 8. DOM Level 2 / i nodi / (3/6) Ciascun elemento viene rappresentato tramite un nodo (tag ...) e ci sono diversi tipi di nodi in base ad alcune semplici caratteristiche; Il nodo di un elemento si distingue in base al nome (che chiamiamo normalmente tag); I nomi non devono essere per forza univoci; ES: Due paragrafi (<p>...</p>) saranno identici fino a che non verranno caratterizzati dall' attributo id .
  9. 9. DOM Level 2 / i nodi / (4/6) document è un nodo sempre presente a prescindere da che cosa contiene il documento stesso. Prende anche il nome di “ nodo del documento ” ; I nodi degli elementi sono differenti dal nodo del documento e rappresentano gli effettivi elementi, tag, presenti nella pagina; Il contenuto di un documento si trova nei nodi testuali oppure nei nodi degli attributi .
  10. 10. DOM Level 2 – testi – (5/6) Tutto quello che non è compreso tra parentesi angolari , viene considerato nodo testuale ; I nodi testuali nodo non possono avere figli ; Se si indenta il codice di un documento HTML per renderlo più leggibile all'occhio umano, tra un nodo testuale e l'altro verranno inseriti anche i tab per separare i tag o i testi. I nodi di spaziatura sono gestiti in maniera differente dai vari browser e bisogna fare attenzione quando si conta sul numero o sull'ordine dei nodi presenti nel DOM;
  11. 11. DOM Level 2 – attributi – (6/6) I nodi degli attributi sono sempre associati ad un elemento , è ovvio che non possiamo avere un attributo senza che vi sia un nodo (tag ...); non fanno parte del DOM ed è per questo motivo che bisogna fare uso di funzioni differenti per operare su di essi, sia in lettura che in scrittura ;
  12. 12. Gestori di Eventi <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><li>Listener per eventi; </li></ul><ul><li>Azioni predefinite; </li></ul><ul><li>Propagazione di eventi; </li></ul>
  13. 13. Gestori di Eventi - (1/7) Il modo più semplice per gestire gli eventi con del codice javascript, è quello di usare gli event handler ( precedenti al DOM ); Un gestore di eventi, è una funzione javascript contenuta in un nodo del DOM che viene richiamata automaticamente quando si verifica un determianto evento su quel nodo; Se non attendiamo che il DOM sia stato caricato, non possiamo operare sui suoi nodi. Ecco la soluzione: $(document).ready(function(){ … });
  14. 14. Gestori di Eventi - (2/7) Quando siamo di fronte ad un codice HTML come mostrato di seguito e facciamo click sul link: <a href=” http://www.unodeitanti.com ”>unodeitanti.com</a> Come impostazione predefinita, il browser risponde all' evento click richiamando l'indirizzo specificato nell'attributo href , ma prima che ciò avvenga, è possibile predisporre un gestore di eventi che risponda a questo in particolare.
  15. 15. Gestori di Eventi - (3/7) Usare i gestori di eventi è una soluzione pratica e veloce quando si deve programmare. In oltre danno la sicurezza di poter funzionare su tutti i browser ; è possibile assegnare un solo evento ad un singolo gestore di event i su un determinato elemento HTML ; Significa che non si può associare ad un evento una serie di attività da svolgere ( non in modo elegante );
  16. 16. Gestori di Eventi - (4/7) var link = document.getElementById(&quot;idlink&quot;); link.onclick = function () { alert(&quot;ciao&quot;); } link.onclick = function () { alert(&quot;Io sono ...&quot;); }
  17. 17. Gestori di Eventi - (5/7) Quando usiamo il gestore di eventi per assegnare la seconda alert, in realtà si sovrascrivono quella precedenti; Domanda: quante volte può capitare che ci siano più script da richiamare al click di un determinato link? Risposta: forse mai =). Però ci sono molti eventi che possono richiedere l'intervento di più script. Un caso tra i tanti, il submit di un form che dovra controllare tutti i campi;
  18. 18. Gestori di Eventi - (6/7) Soluzione generale … var link = document.getElementById(&quot;idlink&quot;); link.onclick = function () { alert(&quot;Ciao&quot;); alert(&quot;Io sono ...&quot;); } Oppure … function script1 () { alert(&quot;Uno&quot;); } function script2 () { alert(&quot;Due&quot;); } var link = document.getElementById(&quot;idlink&quot;); link.onclick = function () { script1(); script2(); }
  19. 19. Gestori di Eventi - (7/7) Dentro le funzioni script1 e script2 l'attributo this non farà più riferimento all'elemento che ha generato l'evento; Se uno dei due eventi restituisce false, non viene bloccata l'azione predefinita dell'elemento;
  20. 20. Listener per Eventi <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><li>Listener per eventi; </li></ul><ul><li>Azioni predefinite; </li></ul><ul><li>Propagazione di eventi; </li></ul>
  21. 21. Listener per Eventi - (1/5) Sono come i gestori di eventi , tranne per il fatto che ad essi si possono assegnre più listenere ad un solo nodo ; Ci consentono l'uso della parola chiave this ; Sono una specifica del W3C ; Ma ... Internet Explorer offre una propria versione completamente differente; (@#&%!$) Anche Safari usa i listener ma con un meccanismo leggermente diverso;
  22. 22. Listener per Eventi - (2/5) Come i gestori di eventi, i listener sono una funzione javascript che viene connessa ad un nodo del DOM ; Se volessimo fare paragoni, i gestori di eventi sono una porta USB mentre i listener sono come un hub ;
  23. 23. Listener per Eventi - (3/5) elemento . addEventListener (“ evento ”, listenerPerEventi , false); addEventListener accetta tre argomenti: evento – l'evento può essere ad esempio click oppure mouseover , senza “on” davanti ; listener – ovvero la funzione listener stessa; tipo di listener – indica se si tratta di un listener per la cattura di eventi o meno;
  24. 24. Listener per Eventi - (4/5) Per Internet Explorer le cose sono leggermente differenti: elemento . attachEvent (“on evento ”, listenerPerEventi ); AttachEvent anziché addEventListener ; Onevento anziché semplicemente evento ; Non c'è nessun terzo argomento;
  25. 25. Listener per Eventi - (5/5) Come distinguere le due implementazioni If ( typeof elemento .addEventListener != “undefined” ) { elemento .addEventListener(“ evento ”, listenerPerEventi , false); } else { elemento .attachEvent(“on evento ”, listenerPerEventi ); } * vedi codice di esempio ...
  26. 26. Azioni Predefinite <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><li>Listener per eventi; </li></ul><ul><li>Azioni predefinite; </li></ul><ul><li>Propagazione di eventi; </li></ul>
  27. 27. Azioni predefinite - (1/3) <a href=”...” onclick=”javascript:return false;”>...</a> Per bloccare l' azione predefinita di un gestore di eventi ed impedirte che il browser la svolga, è sufficente restiture false al gestore dell'evento. Nel modello per listener , al listenerPerEvento viene passato anche l'oggetto dell'elemento le cui proprietà contengono informazioni riguardanti l'evento generato ed i metodi che consentono di controllare il modo in cui l'evento viene elaborato dal browser .
  28. 28. Azioni predefinite - (2/3) Per bloccare l'evento di default basta richiamare l'evento preventDefault(); sull'elemento: clickListener: function (event) { if ( confirm (“Sei sicuro di voler aprire il link?”) ) { event.preventDefault(); } } Basta che un listener richiami questo metodo per evitare che venga eseguita l'operazione di default . * vedi codice di esempio ...
  29. 29. Azioni predefinite - (3/3) In Internet Explorer l' oggetto evento non viene passato come argomento al listener, ma viene reso disponibile come variabile globale chiamata event ; clickListener: function (event) { if ( confirm (“Sei sicuro di voler aprire il link?”) ) { event.returnValue = false; } } La variabile globale ha una proprietà returnValue che si può impostare a false;
  30. 30. Propagazione di Eventi <ul><li>DOM Events; </li></ul><ul><li>DOM Level 2; </li></ul><ul><li>Gestori di Eventi; </li></ul><ul><li>Listener per eventi; </li></ul><ul><li>Azioni predefinite; </li></ul><ul><li>Propagazione di eventi; </li></ul>
  31. 31. Propagazione di Eventi – (1/5) Gli eventi, attraversano l'intera struttura del DOM ed il meccanismo si chiama propagazione dell'evento . Se viene associato un listener ad un link contenuto in un paragrafo, l'evento onclick viene esteso anche al contenitore del link e verrà attivato anche sul paragrafo . <p> <a href=” http://www.example.com ”>example.com</a> </p>
  32. 32. Propagazione di Eventi – (2/5) Nella fase di cattura , l'evento percorre tutto il DOM da document fino all'elemento che ha generato l'evento. Ogni volta che viene incontrato un elemento, viene controllato se ad esso è associato un listener per la cattura di eventi relativi (ecco a che serve il terzo parametro): elemento .addEventListener(“ evento ”, listenerPerEventi , false );
  33. 33. Propagazione di Eventi – (3/5) Il metodo attachEvent di Internet Explorer non prevede il terzo parametro, proprio perchè il modello ad eventi è differente e non prevede i listener per la cattura di eventi ; Molti sviluppatori evitano quindi di sfruttare i listener per la cattura di eventi ;
  34. 34. Propagazione di Eventi – (4/5) Nella fase di target il browser ha raggiunto il nodo DOM dell'elemento cui è stato associato il listener; Al click su un link il target sarà il link stesso mentre ma nel caso di Safari, il target sarà il nodo testuale; Nella fase di risalita , viene ripercorso tutto il DOM fino a document e vengono eseguiti tutti i listener che non sono listener per la cattura di eventi , ad eccezione degli eventi focus() e blur();
  35. 35. Propagazione di Eventi – (5/5) Per interrompere la propagazione di un evento è sufficente richiamare il metodo stopPropagation ; Nel caso di Internet Explorer dovremo impostare la proprietà cancelBubble a true;
  36. 36. I problemi di memoria in IE (1/1) In internet Explorer , la memoria occupata per un listenere non viene rilasciata nemmeno al cambio della pagina; I rallentamenti del browser potrebbero costringere l'utente a riavviarlo; La soluzione consiste nel configurare un listener per l'evento unload dell'oggetto window, ed in questo listener si possono eliminare tutti i listener per eventi definiti per il documento evitando lo spreco di memoria;
  37. 37. Riepilogo – (1/2) Internet Explorer utilizza attachEvent / detachEvent al posto di addEventListener / removeEventListener ; Internet Explorer chiama gli eventi con il prefisso on invece di chiamarli semplicemente evento ; Internet Explorer usa event come variabile globale invece di passarla come parametro al listener ;
  38. 38. Riepilogo – (2/2) Per bloccare un evento InternetExplorer richiede di impostare la proprietà cancelBubble mentre invece di richiamare il metodo stopPropagation (); Internet Explorer richiama i listener come funzioni indipendenti e ci costringe, se vogliamo riciclare il codice, ad ottenere un riferimento all'elemento target invece di usare this ; Internet Explorer non si preoccupa di ripulire la memoria automaticamente ;
  39. 39. I framework javascript Prototype: Event.observe(elemento, “evento”, listenerPerEventi); Event.stopObserving(elemento, “evento”, listenerPerEventi); jQuery: $(selettore).bind(“evento”, listenerPerEventi); $(selettore).unbind(“evento”, listenerPerEventi); Oppure ( sempre con jquery ... ) $(selettore).click(listenerPerClick);
  40. 40. This is the end: faq?

×