Les événements en javascript

Les événements en javascript

  1. Objectif

    • ِConnaitre les événements en JavaScript
  2. Introduction

    • Un des principaux intérêts de JavaScript réside dans la possibilité de programmer les réactions du navigateur face aux actions de l’utilisateur.
    • Grâce à JavaScript, on peut modifier le comportement par défaut du navigateur et l’adapter ainsi à des situations particulières.
    • Cette programmation permet de casser un peu la rigidité d’HTML et surtout de diminuer les échanges entre le navigateur et le serveur, dans la mesure où le navigateur va être capable de prendre des initiatives.
    • Grâce au Javascript il est possible d’associer des fonctions, des méthodes à des événements tels que le passage de la souris au-dessus d’une zone, le changement d’une valeur, …
    • Les principales interventions de l’utilisateur (le passage de la souris sur un objet ou un clic, l’envoi d’un formulaire…) sont classifiées en événements.
    • Les attributs HTML de type événements sont nombreux. Nous allons essayer dans cet article de définir les événements puis en passer en revue les plus utilisés d’entre eux dans cette partie.



  3. Définition

    • Les événements sont des actions de l’utilisateur, qui vont pouvoir donner lieu à une interactivité.
    • Les événements correspondent à des actions effectuées soit par un utilisateur, soit par le navigateur lui-même.
  4. Syntaxe

    • La syntaxe générale pour associer un gestionnaire d’événement à un objet HTML est la suivante :
      • BALISEHTML est une balise HTML.
      • onEvenement est un des nouveaux attributs de gestion d’événements.
      • expressionJS est une chaîne de caractères contenant une ou plusieurs commandes JavaScript séparées par des points-virgules.
  5. Liste des principaux attributs

    • Les attributs HTML de type événements sont très nombreux. Nous allons passer en revue les plus utilisés d’entre eux dans ce tableau.
    • Attribut Propriété associée Description
      onAbort onabort Est déclenché lorsque l’utilisateur interrompt le chargement d’une image.
      onBlur onblur Est déclenché lorsqu’un objet perd le focus.
      onClick onclick Est déclenché lorsque l’utilisateur clique sur un objet.
      onChange onchange Est déclenché lorsque l’utilisateur a changé la valeur d’un champ de saisie.
      onDbIClick ondblclick Est déclenché lorsque l’utilisateur double-clique sur un objet.
      onDragDrop ondrapdrop Est déclenché lorsque l’utilisateur fait glisser un objet dans le
      browser.
      onError onerror Est déclenché lorsqu’une erreur se produit lors du chargement d’une image ou de l’exécution de code JavaScript.
      onFocus onfocus Est déclenché lorsqu’un objet reçoit le focus.
      onKeyDown onkeydown Est déclenché lorsque l’utilisateur enfonce une touche.
      onKeyPress onkeypress Est déclenché lorsque l’utilisateur a appuyé sur une touche.
      onKeyUp onkeyup Est déclenché lorsque l’utilisateur relâche une touche.
      onLoad onload Est déclenché lorsqu’un document (ou une image) commence à se charger.
      onMouseDown onmousedown Est déclenché lorsque l’utilisateur enfonce un des boutons de
      la souris.
      onMouseMove onmousemove Est déclenché lorsque l’utilisateur déplace la souris.

      onMouseOut onmouseout Est déclenché lorsque la souris vient de passer au-dessus d’un lien, d’une ancre ou d’une zone d’une carte cliquable et qu’elle retourne sur le fond de la fenêtre.
      onMouseOver onmouseover Est déclenché lorsque la souris passe au-dessus d’un lien,
      d’une ancre ou d’une zone d’une carte cliquable.
      onMouseUp onmouseup Est déclenché lorsque l’utilisateur relâche un des boutons de la
      souris.
      onMove onmove Est déclenché lorsqu’une fenêtre est déplacée.
      onReset onreset Est déclenché au moment où l’utilisateur annule les données saisies dans un formulaire.
      onResize onresize Est déclenché lorsqu’une fenêtre ou une frame est redimensionnée.
      onSelect onselect Est déclenché lorsque l’utilisateur sélectionne du texte dans un
      champ de saisie.
      onSubmit onsubmit Est déclenché au moment où un formulaire est soumis.
      onUnload onunload Est déclenché au moment où un document se décharge (c’està-dire lors du chargement d’un nouveau document).
      Source du tableau:HTML et Javascript Daniel Charnay, Philippe Chaléat
  6. Exemples

    • <!DOCTYPE html> 
      <html> 
         <head> 
            <meta charset="UTF-8" />
         <style>
      		fieldset {
      			width: 500px;
      			border: 3px solid #556B2F;
      			border-radius: 10px;
      			padding: 10px 20px;
      			text-align: left;
      		}
      	legend{
      	color:blue;
      	}
         </style> 
         </head> 
         <body onLoad="init()"> 
      <center>
      <fieldset>
      <legend style="color:#556B2F">Les événements</legend>   
            <h2 id="Lesevenements">Les événements</h2>
      <p onmouseover="document.body.style.cursor = 'pointer';" onclick="alert('Bien venue!');" style="color:blue";>Cliquez ici vous avez un évenement <strong>onclick</strong></p>
      <p>L'attribut <strong>onclick</strong> est déclenché lorsque l’utilisateur clique sur un objet.</p>
      </fieldset>
      </center>
         </body> 
      </html> 
    • Dans cet exemple on a utilisé l’attribut onmouseover pour changer le curseur, et on a utiliser l’attribut onclick pour alerter l’utilisateur qu’il a cliqué sur le paragraphe
  7. Association des événements aux objets

    • Voici un tableau récapitulant les objets auxquels peuvent être associés chaque événement :
    • Evénements Objets concernés
      abort Image
      blur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
      change FileUpload, Select, Submit, Text, TextArea
      click Button, document, Checkbox, Link, Radio, Reset, Select, Submit
      dblclick document, Link
      dragdrop window
      error Image, window
      focus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
      keydown document, Image, Link, TextArea
      keypress document, Image, Link, TextArea
      keyup document, Image, Link, TextArea
      load Image, Layer, window
      mousedown Button, document, Link
      mousemove Aucun spécifiquement
      mouseout Layer, Link
      mouseover Area, Layer, Link
      mouseup Button, document, Link
      move window
      reset form
      resize window
      select text, Textarea
      submit Form
      unload window
      Source du tableau:www.commentcamarche.net



Abonnez vous à notre chaîne YouTube gratuitement