Prototipo - Gestione degli eventi
La gestione degli eventi è una delle maggiori sfide per ottenere lo scripting cross-browser. Ogni browser ha approcci diversi per gestire i colpi dei tasti.
Prototype Framework gestisce tutti i problemi di compatibilità tra browser e ti tiene libero da tutti i problemi relativi alla gestione degli eventi.
Prototype Framework fornisce lo spazio dei nomi degli eventi , che è pieno di metodi, che prendono tutti l'oggetto evento corrente come argomento e producono felicemente le informazioni che stai richiedendo, su tutti i principali browser.
Lo spazio dei nomi degli eventi fornisce anche un elenco standardizzato di codici chiave che è possibile utilizzare con gli eventi relativi alla tastiera. Le seguenti costanti sono definite nello spazio dei nomi:
S.No. | Costante chiave e descrizione |
---|---|
1. | KEY_BACKSPACE Rappresenta la chiave dello spazio indietro. |
2. | KEY_TAB Rappresenta il tasto di tabulazione. |
3. | KEY_RETURN Rappresenta la chiave di ritorno. |
4. | KEY_ESC Rappresenta la chiave esc. |
5. | KEY_LEFT Rappresenta il tasto sinistro. |
6. | KEY_UP Rappresenta la chiave. |
7. | KEY_RIGHT Rappresenta la chiave giusta. |
8. | KEY_DOWN Rappresenta il tasto giù. |
9. | KEY_DELETE Rappresenta la chiave di cancellazione. |
10. | KEY_HOME Rappresenta la chiave di casa. |
11. | KEY_END Rappresenta la chiave di fine. |
12. | KEY_PAGEUP Rappresenta il tasto pagina su. |
13. | KEY_PAGEDOWN Rappresenta il tasto pagina giù. |
Come gestire gli eventi
Prima di iniziare, vediamo un esempio di utilizzo di un metodo evento. Questo esempio mostra come acquisire l'elemento DOM su cui si è verificato l'evento.
Esempio
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
// Register event 'click' and associated call back.
Event.observe(document, 'click', respondToClick);
// Callback function to handle the event.
function respondToClick(event) {
var element = event.element();
alert("Tag Name : " + element.tagName );
}
</script>
</head>
<body>
<p id = "note"> Click on any part to see the result.</p>
<p id = "para">This is paragraph</p>
<div id = "division">This is divsion.</div>
</body>
</html>
Produzione
Ecco un elenco completo di tutti i metodi relativi a Event. Le funzioni che è più probabile che utilizzerai molto sono osservazione , elemento e interruzione .
Metodi evento prototipo
NOTE - Assicurati di avere almeno la versione 1.6 di prototype.js.
S.No. | Metodo e descrizione |
---|---|
1. | elemento() Restituisce l'elemento DOM su cui si è verificato l'evento. |
2. | estendere() Estende l' evento con tutti i metodi contenuti in Event.Methods. |
3. | findElement () Restituisce il primo elemento DOM con un dato nome di tag, a partire da quello in cui si è verificato l'evento. |
4. | isLeftClick () Determina se un evento del mouse relativo al pulsante riguardava il pulsante "sinistro" (principale, in realtà). |
5. | osservare() Registra un gestore di eventi su un elemento DOM. |
6. | pointerX () Restituisce la posizione orizzontale assoluta per un evento del mouse. |
7. | pointerY () Restituisce la posizione verticale assoluta per un evento del mouse. |
8. | fermare() Interrompe la propagazione dell'evento e impedisce che alla fine venga attivata la sua azione predefinita. |
9. | stopObserving () Annulla la registrazione di un gestore di eventi. |
10. | unloadCache () Annulla la registrazione di tutti i gestori di eventi registrati tramite osservare. Cablato automaticamente per te. Non disponibile dalla 1.6. |