Prototype - Gestion des événements

La gestion des événements est l'un des plus grands défis pour réaliser des scripts inter-navigateurs. Chaque navigateur a différentes approches pour gérer les touches.

Prototype Framework gère tous les problèmes de compatibilité entre navigateurs et vous évite de tout problème lié à la gestion des événements.

Prototype Framework fournit un espace de noms d' événement , qui regorge de méthodes, qui prennent toutes l'objet d'événement actuel comme argument et produisent avec plaisir les informations que vous demandez, dans tous les principaux navigateurs.

L'espace de noms d'événement fournit également une liste normalisée de codes de touche que vous pouvez utiliser avec les événements liés au clavier. Les constantes suivantes sont définies dans l'espace de noms -

S.No.	Constante clé et description
1.	KEY_BACKSPACE Représente la clé de l'espace arrière.
2.	KEY_TAB Représenter la touche de tabulation.
3.	KEY_RETURN Représente la clé de retour.
4.	KEY_ESC Représente la touche esc.
5.	KEY_LEFT Représente la touche gauche.
6.	KEY_UP Représenter la clé.
sept.	KEY_RIGHT Représente la clé droite.
8.	KEY_DOWN Représenter la touche bas.
9.	KEY_DELETE Représente la clé de suppression.
dix.	KEY_HOME Représente la clé de la maison.
11.	KEY_END Représente la clé de fin.
12.	KEY_PAGEUP Représenter la clé de page précédente.
13.	KEY_PAGEDOWN Représente la touche de bas de page.

Comment gérer les événements

Avant de commencer, voyons un exemple d'utilisation d'une méthode événementielle. Cet exemple montre comment capturer l'élément DOM sur lequel l'événement s'est produit.

Exemple

<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>

Production

Voici une liste complète de toutes les méthodes liées à Event. Les fonctions que vous utiliserez le plus souvent sont l' observation , l' élément et l' arrêt .

Méthodes d'événement de prototype

NOTE - Assurez-vous d'avoir au moins la version 1.6 de prototype.js.

S.No.	Méthode et description
1.	élément() Renvoie l'élément DOM sur lequel l'événement s'est produit.
2.	étendre() Étend l' événement avec toutes les méthodes contenues dans Event.Methods.
3.	findElement () Renvoie le premier élément DOM avec un nom de balise donné, à partir de celui sur lequel l'événement s'est produit.
4.	isLeftClick () Détermine si un événement de souris lié à un bouton concernait le bouton «gauche» (principal, en fait).
5.	observer() Enregistre un gestionnaire d'événements sur un élément DOM.
6.	pointerX () Renvoie la position horizontale absolue d'un événement de souris.
sept.	pointerY () Renvoie la position verticale absolue d'un événement de souris.
8.	Arrêtez() Arrête la propagation de l'événement et empêche son action par défaut d'être éventuellement déclenchée.
9.	stopObserving () Annule l'inscription d'un gestionnaire d'événements.
dix.	unloadCache () Annule l'enregistrement de tous les gestionnaires d'événements enregistrés via observe. Câblé automatiquement pour vous. Non disponible depuis 1.6.