Outils pour utilisateurs

Outils du site


cours2007:poo1:cm:les_evenements

Voir cette page sous forme de diaporama.

Gestions des événements

Répondre aux interactions

À OUBLIER

<script type="text/javascript">
  // Pas de code dans la page
</script>

Pas de code intégré dans la page.

À OUBLIER

<input type="button" 
       value="Calculer" 
       onClick="calcul();">

Pas de gestionnaires d'événements dans les balises.

À OUBLIER

<a href="javascript:calcul()">bla</a>

JavaScript pseudoprotocole.

À éviter

<a id='lien' href="#">bla</a>
var lien = document.getElementById('lien');
lien.onclick = function() {
  // code ...
}

Modèle traditionnel, présent des limitations.
Utilisez le modèle avancé unifié par une librairie.

LE problème !

Deux modèles de gestion des événements :

  • W3C : FireFox, Safari, Opera …
  • Microsoft : IE, Opera

MooTools

Unifie la gestion des événements :

C'est LA solution

  • Utiliser une librairie : celle que vous voulez.

Ressources

Principe

Mootools :

qui.addEvent('quoi',fctQueFaire);

W3C et AS3 (standard DOM) :

qui.addEventListener('quoi',fctQueFaire,false);

Internet Explorer :

qui.attachEvent('onquoi',fctQueFaire);

Fonction comme valeur

function quand_domready(event) {
  // Code ...
}
window.addEvent('domready',quand_domready);

Les gestionnaires d'événement prennent comme paramètre une fonction (quand_domready sans parenthèses).

Ne pas confondre

  • quand_domready : la fonction qui sera exécutée
  • quand_domready() : la valeur retournée par l'exécution de la fonction

Fonction anonyme

window.addEvent('domready', function(event){
  // Code ...
});

Évite de créer une fonction qui ne sera utilisée qu'une fois.

Syntaxe JS : Exemples

Schéma type

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose ');
  });
});

Interaction avec le navigateur

Interaction avec le navigateur

Interaction avec le navigateur

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose ');
  });
});

Le code est exécuté en 3 fois :

  • Mise en place de l'événement domready
  • Mise en place de click sur 'dis_moi_tout'
  • Modification de 'message'

Propagation

  • Les éléments HTML sont organisés en arborescences
    • Un élément à (e.g.) plusieurs parents
  • Un gestionnaire d'événement reçoit les événements des enfants de l'élément à qui il est appliqué.
  • Permets “d'écouter” de nombreux éléments avec un seul gestionnaire.

bubbling

capturing

Remarque : Non géré par Microsoft (IE).

L'objet event

Encore deux variantes :

W3C :

qui.addEvent('quoi',function(event){
  //event passé en paramètre au gestionnaire d'événement.
});

Microsoft :

var event = window.event;

MooTools : Event

MootTools unifie la gestion des événements : Event

Moottols 1.2 :

qui.addEvent('quoi',function(event){
  // event est une instance de Event
  // ...
});

MooTools : Event, Méthodes

  • stopPropagation : arrête la propagation.
  • preventDefault : inhibe le comportement par défaut.
  • stop : Les deux précédentes fonctions.

MooTools : Event.stopPropagation

Event:stopPropagation

Stop la propagation d'un événement :

  • bubbling : Les parents ne recevront pas l'événement.
  • capturing : Les enfants ne recevront pas l'événement.

MooTools : Event.preventDefault

Event:preventDefault

Permets d'annuler le comportement par défaut :

  • click : ne suis pas le lien
  • submit : n'envoie pas le formulaire

preventDefault / accessibilité

Important : pour l'accessibilité

  • définir un comportement par défaut pour un lien (pas de JavaScript)
  • Annuler le lien et effectuer un traitement (avec JavaScript)

MooTools : Event, Propriétés

  • Le clavier.
  • La souris.`
  • La cible.

Objet Event de MooTools

Event : Le Clavier

  • shift,control,alt,meta : booléen indiquant les modificateurs pressé.
  • code : code de la touche.
  • key : chaîne de caractères représentant la touche :
    • ‘enter’, ‘up’, ‘down’, ‘left’, ‘right’, ‘space’, ‘backspace’, ‘delete’, ‘esc’

Event : La souris

  • Position de la souris sur la page :
    • page.x
    • page.y
  • Position de la souris par rapport à la fenêtre d'affichage.
    • client.x
    • client.y

Article

Event : La cible

Permets d'identifier :

  • qui a recut l'événement :
    • Utiliser de manière conjointe avec la propagation.
  • D'où l'on vient ou où l'on va :

Mot-clef this

Attention : l'objet pointé par this est déterminé au moment de l'appel en JavaScript.

MooTools à des fonctions utile pour ce problème:

C'est un problème que vous ne devriez pas rencontrer immédiatement.

event.type

La seule propriété standard :
Retourne le type de l'événement.

DOM:event.type

Les événements de l'objet element

Événements de l'objet ''element'' (quirksmode)

  • Souris
  • Clavier
  • Formulaire
  • Focus

Événements souris

click : Renvoie le code de gestion d'évènement pour l'évènement click (clic).
dblclick : Renvoie le code de gestion d'évènement pour l'évènement dblclick (double clic).

Événements souris

mousedown : Renvoie le code de gestion d'évènement pour l'évènement mousedown (bouton de la souris enfoncé).
mouseup : Renvoie le code de gestion d'évènement pour l'évènement mouseup (relâchement du bouton de la souris).

Événements souris

mousemove : Renvoie le code de gestion d'évènement pour l'évènement mousemove (déplacement de la souris).

Événements souris

mouseout : Renvoie le code de gestion d'évènement pour l'évènement mouseout (sortie du pointeur de la souris).
mouseover : Renvoie le code de gestion d'évènement pour l'évènement mouseover (passage du pointeur de la souris par dessus l'élément).

mouseenter/mouseleave

Événements clavier

keydown : Renvoie le code de gestion d'évènement pour l'évènement keydown (touche enfoncée).
keypress : Renvoie le code de gestion d'évènement pour l'évènement keypress (touche pressée).
keyup : Renvoie le code de gestion d'évènement pour l'évènement keyup (touche relâchée).

Événements accessibilité

  • Le survol n'est pas toujours possible (écran tactile):
    • gérer aussi l'événement click.
  • Le click n'est pas toujours possible (pas de souris):
    • utiliser des liens :
      • avec url vers un contenu alternatif.
      • en désactivant le comportement par défaut.
  • Définir des raccourcis clavier :
    • Pour les liens : accesskey
    • Par le JavaScript : qui.addEvent('keypress',fctQueFaire);

Événements formulaire

change : Renvoie le code de gestion d'évènement pour l'évènement change (modification).
submit : Propriété de gestion d'évènement pour les évènements de soumission de formulaires dans la fenêtre. (Formulaires seulement)
reset : Propriété de gestion d'évènement pour les évènements de réinitialisation de la fenêtre. (formulaires seulement)

Événements focus

focus : Renvoie le code de gestion d'évènement pour l'évènement focus (obtention du focus).
blur : Renvoie le code de gestion d'évènement pour l'évènement blur (perte de focus).

Les événements de l'objet window

Événements de l'objet ''window'' (quirksmode)

resize : Propriété de gestion d'évènement pour les évènements de redimensionnement de la fenêtre.
scroll : Propriété de gestion d'évènement pour les évènements de défilement de la fenêtre.

Exemple

window.addEvent('domready', function(){
  var zone = $('zone');
  var superposition = zone.getElement('.superposition');
  superposition.set('tween', {duration: '2000'});
  superposition.fade('hide');
  zone.addEvent('mouseenter',function() {
    superposition.fade('in');
  });
  zone.addEvent('mouseleave',function() {
    superposition.fade('out');
  });
});

voir : Effets HTML/CSS/JavaScript

cours2007/poo1/cm/les_evenements.txt · Dernière modification: 2009/05/09 22:00 (modification externe)