Scribd Logo
Importer

Bienvenue sur Scribd !

  • 18 vues

    Cour DOM Partie6

    Transféré par

    daweddadi08
    Ce document décrit les principaux événements en JavaScript tels que les événements de souris, de clavier et du DOM. Il explique comment gérer ces événements avec la méthode addEventListener().

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    Cour DOM Partie6

    Transféré par

    daweddadi08
    18 vues21 pages
    Ce document décrit les principaux événements en JavaScript tels que les événements de souris, de clavier et du DOM. Il explique comment gérer ces événements avec la méthode addEventListener().

    Titre original

    cour-DOM-Partie6

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Ce document décrit les principaux événements en JavaScript tels que les événements de souris, de clavier et du DOM. Il explique comment gérer ces événements avec la méthode addEventListener().

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    18 vues21 pages

    Cour DOM Partie6

    Transféré par

    daweddadi08
    Ce document décrit les principaux événements en JavaScript tels que les événements de souris, de clavier et du DOM. Il explique comment gérer ces événements avec la méthode addEventListener().

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 21

    Les Evènements en JavaScripT

    I- Définition

    II- la gestion d’évènements

    III- La méthode JavaScript addEventListener()

    IV-Evénements de souris

    V- La propriété key
    LES EVENEMENTS EN JAVASCRIPT
    I- Définition:

    • Les évènements correspondent à des actions effectuées

    soit par un utilisateur, soit par le navigateur lui-même (ils

    sont des déclencheur de fonction).

    • Par exemple, lorsqu’un utilisateur clique sur un bouton

    HTML ou lorsque le navigateur va finir de charger une

    page web, on va parler d’événement.


    LES EVENEMENTSENJAVASCRIPT
    Exemple
    LES EVENEMENTS EN JAVASCRIPT
    II-la gestion d’évènements:
    Le DOM HTML va nous permettre d’assigner des gestionnaires d’évènements
    spécifiques à des éléments HTML en utilisant le JavaScript.
    LES EVENEMENTS EN JAVASCRIPT
    II-la gestion d’évènements:
    L’utilisation du mot clef " this " dans la gestion d’évènements
    Dans le contexte de la gestion d’événements, this va faire référence à
    l’objet (représentant l’élément HTML) qui est le sujet de l’événement.
    LES EVENEMENTS EN JAVASCRIPT
    II-la gestion d’évènements:
    Exercice: On a la page web suivante :
    En cliquant sur Partie 1 et Partie 2
    respectivement on aura l’affichage suivant:

    En cliquant sur le bouton Masquer

    Dans la zone de saisie :


    ➢ Si on saisie 1 on aura un message
    d’alert suivant:

    ➢ Si on saisie 2 on aura un message


    d’alert suivant:

    ➢ Sinon ;on aura un message d’alert


    suivant:
    LES EVENEMENTS EN JAVASCRIPT
    II-la gestion d’évènements:
    Solution:
    LES EVENEMENTS EN JAVASCRIPT
    III-La méthode JavaScript addEventListener()

    • La méthode addEventListener() va nous permettre de lier du code à


    un évènement. On parlera alors de gestionnaire d’évènements.

    • Le code sera alors exécuté dès le déclenchement de l’évènement.

    • Cette méthode appartient à l’objet Element et va avoir besoin de


    deux arguments pour fonctionner :

    Le nom de l’évènement déclencheur de l'action et

    Le code relatif à l’ac tion à effectuer.

    • Les événements vont une nouvelle fois avoir des noms similaires aux
    attributs HTML mais ne vont plus être précédés du «on »(par exemple,
    onclick devient click).
    LES EVENEMENTSENJAVASCRIPT
    LES EVENEMENTS EN JAVASCRIPT
    III-La méthode JavaScript addEventListener()
    LES EVENEMENTS EN JAVASCRIPT
    III-La méthode JavaScript addEventListener()

    • L’un des grands avantages de la méthode addEventListener() est de


    pouvoir lier plusieurs gestionnaires d’évènements de même type sur un
    élément HTML.
    LES EVENEMENTS EN JAVASCRIPT
    III-La méthode JavaScript addEventListener()

    • Elle va également nous permettre de lier plusieurs évènements


    différents à un même élément HTML.
    LES EVENEMENTS EN JAVASCRIPT
    III-La méthode JavaScript addEventListener()

    • Exercice: réaliser la page web suivante

    Remarque :
    Gérer les évènements de la liste déroulante et du bouton en utilisant la méthode addEventListener()
    LES EVENEMENTS EN JAVASCRIPT
    III-La méthode JavaScript addEventListener()

    • Exercice: la solution
    LES EVENEMENTS EN JAVASCRIPT
    IV-Evénements de souris
    En JavaScript, il existe plusieurs événements de souris que vous pouvez écouter pour interagir avec

    l'utilisateur. Voici quelques-uns des événements de souris les plus couramment utilisés :

    1.click : Cet événement se déclenche lorsqu'un élément est cliqué avec le bouton gauche de la souris.

    2.dblclick : Cet événement se déclenche lorsqu'un élément est double-cliqué avec le bouton gauche de la

    souris.

    p1.
    3.mousedown : Cet événement se déclenche lorsque le bouton de la souris est enfoncé sur un élément.

    4.mouseup : Cet événement se déclenche lorsque le bouton de la souris est relâché sur un élément.

    5.mousemove : Cet événement se déclenche lorsqu'un élément est survolé par la souris.

    6.mouseover : Cet événement se déclenche lorsqu'un élément est survolé par la souris.

    7.mouseout : Cet événement se déclenche lorsque la souris quitte la zone d'un élément.

    8.contextmenu : Cet événement se déclenche lorsqu'un élément est cliqué avec le bouton droit de la souris
    LES EVENEMENTS EN JAVASCRIPT
    IV- Evénements de souris
    Exemple:

    p1.
    LES EVENEMENTS EN JAVASCRIPT

    V- La propriété key
    L'objet event en JavaScript contient plusieurs propriétés qui permettent d'accéder aux

    informations de l'événement en cours, notamment la propriété key.

    La propriété key permet de récupérer la touche qui a été pressée lors d'un événement de

    frappe (keydown ou keyup).

    Voici les différentes valeurs possibles pour la propriété key :


    LES EVENEMENTS EN JAVASCRIPT
    V- La propriété key
    1- Lettres et chiffres

    Les touches de lettres et de chiffres ont la même valeur que leur représentation en

    caractère. Par exemple : a, b, c, ..., z 0, 1, 2, ..., 9


    LES EVENEMENTS EN JAVASCRIPT
    V- La propriété key
    2-Touches spéciales
    Certaines touches spéciales ont des valeurs spécifiques pour la propriété key. Voici
    quelques exemples :
    Enter: la touche Entrée
    Backspace: la touche Retour arrière
    Escape: la touche Échap
    Tab: la touche Tabulation
    Shift: la touche Maj
    Control: la touche Ctrl
    Alt: la touche Alt
    ArrowUp, ArrowDown, ArrowLeft, ArrowRight: les touches fléchées
    LES EVENEMENTS EN JAVASCRIPT
    V- La propriété key
    3- Touches fonction
    Les touches de fonction (F1 à F12) ont également des valeurs spécifiques pour la
    propriété key. Par exemple : F1, F2, F3, ..., F12

    4-Autres touches
    Enfin, certaines touches n'ont pas de valeur spécifique pour la propriété key et sont
    représentées par leur nom en anglais. Par exemple :
    CapsLock: la touche Verr Maj
    PrintScreen: la touche Impr écran
    Insert: la touche Inser
    Delete: la touche Suppr
    LES EVENEMENTS EN JAVASCRIPT
    LES EVENEMENTSENJAVASCRIPT
    V- La propriété key
    Principaux événements du DOM

    Evénement DOM Description


    Bouton de la souris enfoncé puis relâché sur un
    click
    élément.
    dblclick Deux foix l'événement click
    mouseover Souris au-dessus d'un élément.
    mouseout Souris sort d'un élément.
    Bouton de la souris enfoncé, pas relâché, sur un
    mousedown
    élément.
    mouseup Bouton de la souris relâché sur un élément.
    •
    mousemove Souris en mouvement au-dessus d'un élément.
    keydown Touche clavier enfoncée, pas relâchée, sur un élément.
    keyup Touche clavier relâchée sur un élément.
    keypress Touche clavier enfoncée et relâchée sur un élément.
    L'élément reçoit, gagne, le focus. Quand un objet
    focus
    devient l'élément actif du document.
    blur Elément perd le focus.
    change Changement de a valeur d'un élément de formulaire.
    select Sélection du texte d'un élémen, mis en srubrillance.
    submit Envoi d'un formulaire
    reset Réinitialisation d'un formulaire

    Vous aimerez peut-être aussi