Les événements Ils sont au cœur de l’interactivité des pages.

Présentation au sujet: "Les événements Ils sont au cœur de l’interactivité des pages."— Transcription de la présentation:

1 Les événements Ils sont au cœur de l’interactivité des pages

2 Un très bon site http://www.quirksmode.org/

3 Pourquoi des gestionnaires d’événements ? Généralement le code JavaScript est exécuté en réponse à un événement. C’est pour cette raison que JavaScript à été rajouté au navigateur : Offrir de l’interactivité Les gestionnaires d’événements sont le moteur de cette interactivité

4 Les objectifs des gestionnaires d’événements Détecter les actions de l’utilisateur Exécuter le code JavaScript associé Vous offrir la possibilité d’augmenter l’attrait de vos pages

5 L’histoire des gestionnaires d’événements Ils existent depuis Netscape 2 Ils n’ont pas cessés d’évoluer Mais de façon anarchique Il existe un standard lié au DOM Il n’a que Mozilla qui le supporte Internet Explorer à sa propre variante

6 La préhistoire des gestionnaires d’événements On pouvait les placer sur peu d’élément HTML Les liens Les formulaires et leurs champs On les utilisait pour : Des boutons animés Valider les donnés d’un formulaire avant de l’envoyer

7 L’évolution des gestionnaires d’événements Plus de variétés Utilisable sur plus d’élément HTML La possibilité de les affecter par le biais de JavaScript Plus d’information

8 La guerre des Navigateurs (encore) Les gestionnaires d’événements ont connu de grand développement lors de la sortie des navigateurs de quatrième génération. Chacun des camps à développer ses propres standards Comment on obtient des informations supplémentaire (ex : la position de la souris) Quand un événement peur être traité par un élément HTML et son élément parent, quel gestionnaire d’événement est exécuté en premier ?

9 Un espoir ? Le W3C a proposé une normalisation Elle à pour fondement l’ancien modèle de Netscape Tout comme les CSS, c’est une généralisation Ce modèle offre des solutions pour : La capture d’un événement La propagation L’annulation

10 Les problèmes de compatibilité Que faire alors ? Détecter mais ne pas se baser sur la dénomination du navigateur. Rester minimaliste autant que possible

11 Les problèmes de compatibilité Ce qui est « standard » Il y a beaucoup de gestionnaires d’événements communs aux navigateurs les plus courants. (Tableau)Tableau Il faut consulté une documentation car il ne sont pas permis dans toutes les balise HTML http://src/public/doc/selfhtml-fr/javascript/langage/gestevenements.htm http://src/public/doc/selfhtml-fr/javascript/langage/gestevenements.htm

12 onAbort onAbort (en cas d'interruption) Est prévu pour le cas où un utilisateur appuie sur le bouton stop du navigateur, alors que tous les graphiques ne sont pas encore chargés. D'après JavaScript (Netscape) est permis dans le repère suivant:

13 onChange onChange (après modification réussie) Au cas où un élément a reçu une valeur modifiée

14 onDblClick onDblClick (en double-cliquant) Au cas où l'utilisateur double-clique sur un élément.

15 onError onError (en cas d'erreur) Est approprié pour capter les messages d'erreur et les remplacer par des messages personnalisés. Attention pourtant, les erreurs ne sont pas pour autant écartées!! onError est conçu avant tout pour traiter les erreurs intervenant lors du chargement de graphiques.. D'après JavaScript est permis dans le repère HTML suivant:

16 onFocus onFocus (en activant) Entre en action quand l'utilisateur active un élément.

17 onKeyDown onKeyDown (en appuyant sur une touche) Entre en action si l'utilisateur, alors qu'il a activé un élément, appuie sur une touche.

18 onKeyPress onKeyPress (en maintenant une touche appuyée) Entre en action quand l'utilisateur appuie sur une touche et la maintient appuyée.

19 onKeyup onKeyup (en relâchant la touche) Entre en action quand l'utilisateur appuie sur une touche et la relâche.

20 onLoad onLoad (en chargeant un fichier) Entre en action quand un fichier HTML est chargé.

21 onMousedown onMousedown (en maintenant la touche de souris appuyée) Entre en action quand l'utilisateur maintient la touche de souris appuyée.

22 onMousemove onMousemove (en bougeant la souris) Entre en action si l'utilisateur bouge la souris indépendamment du fait que la touche en soit appuyée ou non.

23 onMouseout onMouseout (en quittant l'élément avec la souris) Entre en action quand l'utilisateur passe avec la souris sur un élément et le quitte ensuite.

24 onMouseUp onMouseover (en passant sur l'élément avec la souris) Entre en action quand l'utilisateur passe avec la souris sur un élément

25 onReset onReset (en initialisant le formulaire) Entre en action quand l'utilisateur veut initialiser le formulaire..

26 onSelect onSelect (en sélectionnant du texte) Entre en action quand l'utilisateur sélectionne du texte.

27 onSubmit onSubmit (en envoyant le formulaire) Entre en action quand l'utilisateur envoie un formulaire.

28 onUnload onUnload (en quittant le fichier) Entre en action quand l'utilisateur quitte un fichier HTML.

29 Les problèmes de compatibilité La mise en place Les moyens traditionnels pour référencer les événements sont suffisants (dans bien des cas) Par le biais d’un attribut placer dans une balise. Par le biais d’une propriété de l’objet. Mais il existe besoins qui n’ont pas de réponse simple Ex : la position de la sourie.

30 Les gestionnaires d’événements dans les balises Une écriture très simple : un_lieu Traditionnellement on place l’appelle à une fonction. Mais il est possible d’écrire un code plus long. Le problème est la lisibilité et le déboguage.

31 Annuler une action dans un attribut Il est possible de mettre fin à l’action que l’utilisateur allait entreprendre un_lieu

32 this dans un attribut On peut obtenir simplement une référence sur l’objet associé à la balise. un_lieu un_autre_lieu Mais la variable this n’est valable que entre les guillemets si on veut l’utiliser ailleurs (une fonction appelée), il faut la passer en paramètre.

33 Les gestionnaires d’événement dans les propriétés d’un Objet Si on possède dans une variable une référence à l’objet, il suffit d’écrire document.links['Ne_fait_rien'].onclick = Ne_pas_faire; Attention on ne met pas de parenthèses, on veut affecter la référence de la fonction à la propriété. Si on met des parenthèses, on évalue la fonction et affecte son résultat à la propriété. Il est possible de retirer un gestionnaire d’événement en affectant null à la propriété

34 Annuler une action dans une fonction appelé par le biais d’une propriété Cela ne change pas On_va_ou Rq : le code écrit dans un attribut se comporte comme une fonction, et inversement

35 this dans une fonction appelé par le biais d’une propriété Sans changement function doSomething(obj) { var linkTo = obj.href; return confirm('Do you really want to follow the link to ' + linkTo + '?') }

36 Les fonctions anonymes Ce sont des fonctions dépourvues de nom, car l’on ne souhaite pas les appeler à différent endroit. On utilise directement la référence que retourne leurs déclarations. document.links['Ne_fait_rien'].onclick = function () { return false} ; Cela peut-être un moyen pratique si l’on souhaite affecter de nombreux gestionnaires d’événement par du code JavaScript.

37 Obtenir plus d’information lors d’un événement Quand un événement survient tout ce que l’on sait c’est qu’il est survenu (on a été appelé) et à qui il est arrivé (this). Si l’on veut plus d’information il faut utilisé l’Objet event qui contient d’autre information. Malheureusement on accède de façon différente à cet objet Internet Explorer : C’est une propriété de l’objet windows, windows.event Netscape : C’est un paramètre passé à la fonction

38 Résoudre le problème de l’Objet event Voila une solution très simple function Un_Truc(e) { if (!e) var e = window.event; alert(e.type);} Ainsi e contient toujours l’Objet event. Il faut donc affecter le gestionnaire d’événement par le biais de la propriété de l’objet Malheureusement cet Objet event à des propriétés très variable d’un navigateur à l’autre.

39 Ce que contient l’Objet event Il est possible de savoir entre autre :  L’élément HTML qui a « générer l’événement  La touche qui à été tapez  Le bouton de la souris qui à été pressé  Et surtout la position de la souris Mais de nombreuse différence entre les navigateur rend cela difficile.

40 Les coordonnés de la souris Il n’existe pas moins de 6 types de coordonnées qui changent d’un navigateur à l’autre. Le code : function MaSouris(e){ var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft; posy = e.clientY + document.body.scrollTop; } // posx and posy Contiennent la position de la souris // Maintenant il faut l'utilisée }