L'objet Event et ses propriétés

Cliquez l'image et observez !

Appuyez sur n'importe quelle touche du clavier et observez !

En particulier appuyez sur les touches ← , ↑ , → et ↓ du clavier et notez sur une feuille de papier le code ASCII de chacune de ces quatre touches.
Ainsi vous comprendrez la programmation du clavier dans la page suivante.

Le code de la page (extrait)

... <body> <button>Cliquez ce bouton et observez ! </button> <img src ="../images/toucan.jpg" width ="30%" > ... <script> document.querySelector('button').onclick = function(evt) { alert("type évènement : " + evt.type) ; alert("cible évènement : "+ evt.target); } document.querySelector('img').onclick = function(e) { alert("type évènement : " + e.type) ; alert("cible évènement : " + e.target); } document.onkeydown = function(event) { // si appui sur une touche du clavier alert("code ASCII de la touche : " + event.keyCode) ; alert("type évènement : " + event.type) ; alert("cible évènement : " + event.target) ; } </script> ...

Commentaire

Lorsque vous cliquez sur un noeud ou survolez un noeud ou encore lorsque vous appuyez sur un touche du clavier un évènement se produit c'est à dire un changement d'état qui peut être analysé par JavaScript.

Il y a d'autres propriétés mais qui sont moins utiles ...

L'événement est pour JavaScript un objet. Mais c'est au programmeur de trouver un nom à cet objet. Souvent il est nommé event ou encore e ou plus rarement evt.

Dans la première fonction j'ai nommé l' objet évènement event, e dans la deuxième fonction et evt dans la troisième fonction.

Si vous cliquez sur un noeud le code ASCII est zéro ! Donc si la propriété keyCode est différente de zéro cela veut dire que vous avez utilisé le clavier.

Si vous avez suivi les consignes vous avez noté que les touches de direction du clavier ont un code ASCII compris entre 37 et 40 inclus.

La propriété keyCode est la base de la programmation du clavier en JavaScript.
Voir page suivante !
Retour menu