Javascript - 8 | WebMaster & WebDesigner

Possiamo gestire gli eventi in modo migliore?
<a onclick=”alert(‘pippo’);”>

Vogliamo separare il codice delle
varie tecnologie...

Tutto nel JS
<input type="button" value="Pippo" id="pippo" />

<script type="text/javascript">
//devo omettere le parentesi richiamando la funzione
alertPippo (function pointer)
document.getElementById("pippo").onclick = alertPippo;

function alertPippo(){
alert("pippo");
}
</script>

addEventListener

addEventListener() permette di impostare
delle funzioni che verranno chiamate al
verificarsi dell'evento specificato,
sull'oggetto specificato(target dell'evento).

https://developer.mozilla.org/it/docs/DOM/element.addEventListener

Esempio
<input type="button" value="Pippo" id="pippo" />
var pippo = document.getElementById("pippo");
pippo.addEventListener("click", alertPippo, false);
pippo.addEventListener("click", alertHello, false);
           function alertPippo() {
                 alert("pippo");
           }
           function alertHello() {
                 alert("hello");
           }
</script>

Why?
Perchè usare addEventListener?

addEventListener è il modo corretto per
registrare un listener, come da specifica
W3C. I suoi benefici sono:

• permette di aggiungere diversi handler
per singolo evento.
• Dà un controllo migliore di cosa
succede quando il listener viene
attivato(capturing vs bubbling)
• funziona con qualunque elemento
DOM, non solo con gli elementi HTML.

Esempio
   <style type="text/css">
<body onload="load();">
     #t { border: 1px solid red }
     #t1 { backgroundcolor: pink; }
<table id="t">
   </style>
   <tr><td
id="t1">one</td></tr>
   // Function to change the content of t2
   function modifyText() {    <tr><td
     var t2 = document.getElementById("t2");
     t2.firstChild.nodeValue = "three";
id="t2">two</td></tr>
   }
</table>

   // Function to add event listener to t
   function load() {
     var el = document.getElementById("t");
     el.addEventListener("click", modifyText,
false);
   }

Internet Explorer?

//fino alla versione 8 ie ha un suo
//metodo attachEvent...

if (el.addEventListener){
el.addEventListener('click',
modifyText, false);
} else if (el.attachEvent){
el.attachEvent('onclick',
modifyText);
}

Rimuovere eventi

Se serve posso anche
rimuovere gli eventi
attraverso il metodo:
removeEventListener

Le form sono il principale metodo che ha
l'utente per interagire con il sito.

Oggetto .form
• document.forms[x].comando
E' un array che ci accede form nella pagina n. x
consente di (conteggio parte da 0)
• document.forms["xxxx"].coman
accedere a tutte le do accede al form con
form nella pagina. name="xxxx"
• document.xxxx.comando forma
abbreviata per accede al form
con name="xxxx"

Proprietà form
https://developer.mozilla.org/it/docs/DOM/form
form.elements
Restituisce una collezione dei controlli contenuti form corrente.
form.length
Restituisce il numero di controlli contenuti nel form corrente.
form.name
Restituisce una stringa con con il valore dell'attributo name del form corrente.
form.acceptCharset
Restituisce una lista dei set di caratteri supportati per il form corrente.
form.action
Restituisce/setta l'URI a cui verranno spediti i dati del form.
form.enctype
Restituisce/setta il tipo di contenuto che il form corrente invierà al server.
form.method
Restituisce/setta il metodo con cui inviare le informazioni al server.
form.target
Restituisce/setta il nome del frame in cui rendere la pagina di risposta del server.

Metodi Form

form.submit
Invia il form.
form.reset
Riporta il form al suo stato iniziale.

Sosacroniro

Ora abbiamo quasi tutti gli elementi per fare
una form di contatto sui nostri progetti e
validare l'input che ci da l'utente, così che
dal sito ci possa arrivare un po' di spam...

Domande?

Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me

Javascript - 8 | WebMaster & WebDesigner

Recommended

Recommended

More Related Content

Similar to Javascript - 8 | WebMaster & WebDesigner

Similar to Javascript - 8 | WebMaster & WebDesigner (20)

More from Matteo Magni

More from Matteo Magni (20)

Javascript - 8 | WebMaster & WebDesigner