Post on 24-Jun-2015
description
Javascript [8]Matteo Magni
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" />
<script type="text/javascript">
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">
#t { border: 1px solid red }
#t1 { backgroundcolor: pink; }
</style>
<script type="text/javascript">
// Function to change the content of t2
function modifyText() {
var t2 = document.getElementById("t2");
t2.firstChild.nodeValue = "three";
}
// Function to add event listener to t
function load() {
var el = document.getElementById("t");
el.addEventListener("click", modifyText, false);
}
<body onload="load();">
<table id="t">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
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.
Form
document.form
Oggetto .form
E' un array che ci consente di accedere a tutte le form nella pagina.
• document.forms[x].comando accede form nella pagina n. x (conteggio parte da 0)
• document.forms["xxxx"].comando accede al form con name="xxxx"
• document.xxxx.comando forma abbreviata per accede al form con name="xxxx"
Proprietà 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.
https://developer.mozilla.org/it/docs/DOM/form
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...
sosacroniro.it
sosacroniro.com
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me