Javascript – Eventi 1: Nel paradigma di programmazione ad eventi il flusso del programma è largamente determinato dal verificarsi di eventi esterni. Nel caso del linguaggio Javascript gli eventi sono rappresentati per la maggior parte dall’iterazione dell’utente con il sito web
DOM event handler
Lavoreremo sul seguente frammento HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM events handler</title>
</head>
<body>
<form>
<label for="username">Inserisci il nome utente: </label>
<input type="text" id="username"/>
<div id="response"></div>
<label for="password">Inserisci la password: </label>
<input type="text" id="password"/>
</form>
<script src="js/dom-events-handler.js"></script>
</body>
</html>
Con il seguente script controllo che il nome utente non inizi con il simbolo # (ovviamente è solo un esempio per esercitarci sugli eventi, difatti possiamo utilizzare l’attributo pattern, del linguaggio HTML, per verificare, tramite un RegExp, i caratteri immessi)
function checkUsername(){
var elResponse = document.getElementById('response');
var username = this.value;
if(username.charAt(0)=='#'){
elResponse.textContent='Il nome utente non può iniziare con #';
}else{
elResponse.textContent='';
}
}
var elUsername= document.getElementById('username');
elUsername.onblur=checkUsername;
La funzione checkUsername() viene richiamata quando l’utente si sposta nella casella password, ovvero quando si verifica l’evento blur che ed è esattamente l’opposto dell’evento focus.
Con l’istruzione var username = this.value; creo una variabile di tipo String prendendo il valore inserito dall’utente, nella selezione sfrutto il metodo charAt() per controllare il contenuto del primo carattere, nel caso sia uguale al simbolo # scriveremo un messaggio nel div con id response .
Event Listener
Lo script successivo utilizzerà lo stesso algoritmo dello script precedente, ma utilizzo il metodo addEventListener, tale metodo richiede come primo argomento il nome dell’evento (blur nel nostro caso), come secondo la funzione da richiamare.
function checkUsername(){
var elResponse = document.getElementById('response');
var username = this.value;
if(username.charAt(0)=='#'){
elResponse.textContent='Il nome utente non può iniziare con #';
}else{
elResponse.textContent='';
}
}
var elUsername= document.getElementById('username');
elUsername.addEventListener('blur',checkUsername,false);
Ricorda che il metodo addEventListener non è supportato nel browser Internet Explorer 8 e precedenti
Uso dei parametri con l’Event Listener
In situazioni reali spesso le funzioni ricevono parametri dinamicamente da file di impostazioni, dal server web, da un database. Quindi nel successivo script utilizzo una funzione che riceve un parametro con l’event Listener
var elUsername= document.getElementById('username');
elUsername.addEventListener('blur',function(){
checkUsername('#');
console.log('Evento blur');
},false);
function checkUsername(symbol){
var elResponse = document.getElementById('response');
if(elUsername.value.charAt(0)==symbol){
elResponse.textContent='Il nome utente non può iniziare con #';
}else{
elResponse.textContent='';
}
}
Nota che alla riga 2 del precedente script utilizzo una funzione anonima, in tale modo posso richiamare più funzioni quando si verifica un evento.
Oggetto Event
ogni volta che un evento viene attivato, l’oggetto evento contiene dati utili sull’evento, come ad esempio:
- Su quale elemento si è verificato l’evento
- In quale parte del vieport l’utente ha fatto click
Proviamo utilizzando la seguente pagina HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Object</title>
</head>
<body>
<form>
<label for="username">Inserisci il nome utente: </label>
<input type="text" id="username"/>
<div id="response"></div>
</form>
<script src="js/event-object.js"></script>
</body>
</html>
Il seguente script grazie all’oggetto Event mi permette di sapere il tipo di evento e il nome del TAG in cui si è verificato
function targetInfo(e){
var elResponse = document.getElementById('response');
elResponse.innerHTML= "Tipo evento " + e.type;
elResponse.innerHTML+="<br>Nel TAG: "+e.target.tagName;
}
var elUsername=document.getElementById('username');
elUsername.addEventListener('focus',targetInfo);
Nella prossima lezione: i differenti tipi di eventi
