Vous êtes ici Tutoriel Les évènements

Lien utile

Tutoriel sur le JavaScript - Les évènements

Tous niveaux


Tutoriel écrit par LaurentG alias KOogar le 3 Mars 2009


Une des choses extraordinaire avec JavaScript est sa capacité à vous aider à créer des pages dynamiques qui améliorent l'interaction avec l'utilisateur, donnant au visiteur l'impression que le site va pratiquement prendre vie sous ses yeux.

Sommaire :




Les évènements



Les Evénements en JavaScript

Les éléments constitutifs d'une page Web interactive résident dans le système d'événements de JavaScript. Un événement en JavaScript est quelque chose qui se passe avec ou sur la page Web. Voici quelques exemples d’évènements:
- Un clic de souris
- Un chargement de page
- Le passage de la souris sur une zone sensible de la page Web
- La sélection d'une zone de saisie dans un formulaire HTML
- La frappe d’une touche du clavier


Exemple d’utilisation des Evènements

JavaScript contient des noms prédéfinis qui couvrent les nombreux évènements qui peuvent survenir, y compris ceux énumérés ci-dessus. Pour saisir un évènement et l’utiliser pour une action quelconque lorsqu’il se produit, vous devez spécifier l'évènement, l'élément HTML qui sera en attente de l'évènement, et la fonction (s) qui sera exécutée lorsque l'évènement se produit.
Quand nous avons eu une alerte par une popup, c'est qu'un bouton a été cliqué. Il s'agit d'un évènement "onclick" dans JavaScript. Nous allons vous montrer le même exemple à nouveau, ainsi qu’avec les évènements mouseover et mouseout.

.01
.02
.03
.04
.05
.06
.07
.08
.09
.10
.11
.12
.13
.14
.15
.16
.17
.18
.19
  <html>
<head>
<script type="text/javascript">
<!--
function popup() {
    alert("Bonjour tout le monde ")
}
//-->
</script>
</head>
<body>

<input type="button" value="Click Me!" onclick="popup()"><br />
<a href="#" onmouseover="" onMouseout="popup()">
Cliquez moi!</a>

</body>
</html>

Avec le bouton, nous avons utilisé l'évènement onClick pour arriver à l’action souhaitée et nous lui avons ordonné d’appeler notre fonction popup qui est définie dans notre en-tête. Pour appeler une fonction, vous devez donner le nom de la fonction suivit d'une parenthèse "()".
Nos évènements mouseover et mouseout ont été regroupés dans un seul élément HTML - un lien. Nous voulions que rien ne se passe quand quelqu'un pose la souris sur le lien, mais que lorsque la souris quitte le lien (onMouseout), une fenêtre popup s’affiche.