A questo punto proviamo ad usare il nostro message box, e ci accorgiamo che non reagisce affatto alla tastiera.

Collegare gli eventi

Il mio obiettivo è quello di catturare l'input da tastiera mentre la finestra è visualizzata, e ripristinare l'eventuale handler precedente quando l'utente chiude la finestra.

Per prima cosa connetto l'handler insieme alle funzioni dei pulsanti:

_msgBox.prototype.collegaEventi = function (aCallbackFunction)
{
[...]
    // assegnare testi e funzioni ai pulsanti.
 	if (this.button1!="")
	{
		this.oldKeyPressHandler=document.onkeypress;
		document.onkeypress = msgBox.handleKeyboard

Questo mi connetterà l'evento ogni volta che c'è  almeno un bottone. E imposterà oldKeyPressHandler al gestore precedente.

La funzione di callback è ora divisa tra interpretazione del messaggio (buttonclick e keypress) ed elaborazione:

_msgBox.prototype.handleCallback = function(aMsgResult)
{
	msgBox.divMsgModal.style.display = "none"
	msgBox.divMsgBox.style.display = "none"

	document.onkeypress = msgBox.oldKeyPressHandler
	msgBox.oldKeyPressHandler=null

	msgBox.callbackFunction(aMsgResult)
}

Qui riassegno il gestore originale dell'evento tastiera.

Gestire gli eventi

La funzione di gestione del mouse quindi, usando la nuova callback generica, diventa:

_msgBox.prototype.buttonEvent = function(e)
{
    // Questo evento viene invocato dal bottone cliccato yes no ecc.
    // quindi non ha un accesso diretto all'istanza dell'oggetto dall'interno
    // e bisogna usare il riferimento assoluto

    if (e instanceof Object)
    { // firefox
        msgBox.handleCallback(e.target.msgResult)
    }
    else
        msgBox.handleCallback(event.srcElement.msgResult);
}

Notare che non uso this.handleCallback ma msgBox.handleCallback perché dall'interno di un handler di evento non posso accedere all'oggetto originale.

Anche nel caso di interpretazione del comando da tastiera i browser si comportano in maniera diversa:

quindi la funzione handleKeyboard() dovrà:

_msgBox.prototype.handleKeyboard = function(e)
{
     if(!e) e=window.event;
	key = e.keyCode ? e.keyCode : e.which;

    switch (key)
    {
        case 13: //enter
        case 32: //spazio
        case 115:// s
        case 83: // S
        case 121:// y
        case 89: // Y
            msgBox.handleCallback(msgBox.button1Result);
            break;
        case 27: //ESC (non viene visto da firefox)
        case 110://n
        case 78: //N
            msgBox.handleCallback(msgBox.button2Result)
            break;
    }
}

Altra nota curiosa alla sintassi: IE supporta 

case 13,32,115:

Ma firefox no.

---

I file descritti in questo articolo si possono scaricare dall'introduzione