Événements de souris JavaScript
Comme le suggère le nom des événements Javascript Mouse sont déclenchés par l'interaction de la souris avec les pages Web et ces événements font partie de l'objet Mouseevent.
Les événements de souris JavaScript sont
Cet article traite de ces un par un en profondeur.
événement onclick
Lorsqu'un utilisateur clique sur un élément, l'événement OnClick se produit. Il bubble et peut être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnClick est fournie ci-dessous.
Syntaxe HTML
Syntaxe JavaScript
objet.onClick = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("cliquez", script);Exemple
Cliquez sur le bouton ci-dessous.
Dans l'exemple ci-dessus, un bouton apparaît sur la page Web. Après avoir cliqué sur le bouton, l'événement OnClick se produira et un message apparaîtra.
Sortir
Avant que le bouton ne soit cliqué.
Une fois le bouton cliqué, le message apparaîtra.
Événement OnContextMenu
Lorsque le menu contextuel d'un élément est ouvert à l'aide du clic droit, l'événement onContextMenu se produit. Il bubble et est également annule. Cet événement prend en charge toutes les balises HTML et est incluse dans DOM version 3.
Syntaxe
La syntaxe de l'événement OnContextMenu est donnée ci-dessous.
Syntaxe HTML
Syntaxe JavaScript
objet.onContextMenu = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("contextMenu", script);Exemple
Cliquez avec le bouton droit sur moi.
Dans l'exemple ci-dessus, lorsque vous cliquez avec le bouton droit sur le texte, l'événement OnContextMenu se déclenchera et d'abord une boîte de dialogue apparaîtra en disant que vous venez d'effectuer un clic droit et après avoir cliqué sur OK dans la boîte de dialogue, le menu contextuel s'ouvrera.
Sortir
Lorsque vous exécutez l'exemple ci-dessus, le texte suivant apparaîtra.
Maintenant, lorsque vous cliquez avec le bouton droit sur le texte, la boîte de dialogue apparaîtra.
Après avoir cliqué sur OK, le menu contextuel s'ouvrira.
événement ondblclick
Lorsqu'un élément est double-cliqué, l'événement ondblclick se produit. Il bubble et peut être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement ondblclick est fournie ci-dessous.
Syntaxe HTML
Syntaxe JavaScript
objet.ondblclick = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("dblclick", script);Exemple
Dans l'exemple ci-dessus, un bouton apparaîtra et lorsque vous doublerez sur le bouton, les déclencheurs de l'événement ondblclick et un message apparaîtra. Voici la sortie.
Sortir
Avant de double-cliquer sur le bouton.
Après le double de cliquer sur le bouton.
Événement OnMoudown
Lorsque vous appuyez sur un bouton de souris tout en gardant la souris sur un élément HTML, l'événement OnMoudown se produit. Il bubble et peut être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnMoudown est la suivante.
Syntaxe HTML
Syntaxe JavaScript
objet.onMoudown = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("Mousedown", script);Exemple
Dans l'exemple ci-dessus, un bouton apparaît sur la page Web. Lorsque vous cliquez avec le bouton avec le bouton tout en gardant le pointeur de la souris sur le bouton, l'événement OnMoudown se déclenchera et le texte sur le bouton changera sa couleur du noir au rouge.
Sortir
Le bouton avant de cliquer.
Après avoir cliqué avec le bouton droit sur la souris pendant que le curseur reste sur le bouton.
Événement OnMouseenter
Lorsque vous apportez un pointeur de souris sur un élément HTML, l'événement OnMouseenter se produit.Il ne peut pas bubble et ne peut pas être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnMouseenter est la suivante.
Syntaxe HTML
Syntaxe JavaScript
objet.onMouseEnter = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("MouseEsenter", script);Exemple
Dans l'exemple ci-dessus, un texte apparaît sur la page Web. Lorsque vous apportez le curseur de votre souris sur le texte, l'événement OnMouseenter se déclenchera et la couleur changera en rouge.
Sortir
Avant d'apporter le pointeur de la souris sur le texte.
Après avoir apporté le curseur de la souris sur le texte.
Événement OnMouseleave
Lorsque vous éloignez votre pointeur de souris d'un élément, l'événement OnMouseleave se produit. Il ne peut pas bubble et ne peut pas être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnMouseleave est la suivante.
Syntaxe HTML
Syntaxe JavaScript
objet.onMousELeave = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("Mouseleave", script);Exemple
Dans l'exemple ci-dessus, un texte apparaît sur la page Web. Lorsque vous déplacez le curseur de la souris loin du texte, l'événement OnMouseenter se déclenchera et la couleur changera en vert.
Sortir
Avant d'éloigner le pointeur de la souris du texte.
La couleur changera lorsque le pointeur de la souris s'éloignera.
Événement OnMouseMove
Lorsque vous déplacez votre curseur de souris tout en le gardant sur un élément, l'événement OnMousemove se produit. La seule différence entre cet événement et l'événement OnMouseenter est qu'il bubble et peut être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de Onmousemove est donnée ci-dessous.
Syntaxe HTML
Syntaxe JavaScript
objet.onMouseMove = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("MouseMove", script);Exemple
Dans l'exemple ci-dessus, lorsque vous déplacez le curseur de la souris sur le texte, l'événement OnMousemove se produira et une boîte de dialogue apparaîtra pour vous informer que l'événement OnMouseMove a été déclenché.
Sortir
Avant de déplacer la souris sur le texte.
Après.
Événement OnMouseout
Lorsqu'un curseur de souris quitte un élément ou l'un de ses enfants, l'événement OnMouseout se produit. La seule différence entre cela et OnMouseleave est qu'il bubble et peut être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnMouseout est donnée ci-dessous.
Syntaxe HTML
Syntaxe JavaScript
objet.onMouseout = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("Mouseout", script);Exemple
Dans l'exemple ci-dessus, vous déplacez le curseur de la souris loin du bouton, l'événement OnMouseout se déclenchera et la couleur du texte sur le bouton changera en vert.
Sortir
Avant
Après
Événement OnMouseOver
Lorsque vous apportez votre curseur de souris sur un élément ou l'un de ses enfants, l'événement OnMouseOver se produit. Il bubble et peut être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnMouseover est fournie ci-dessous.
Syntaxe HTML
Syntaxe JavaScript
objet.onMouseOver = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("Mouseover", script);Exemple
Dans l'exemple ci-dessus, vous déplacez le curseur de la souris sur le bouton, l'événement OnMouseOver déclenchera et la couleur du texte sur le bouton changera en rouge.
Sortir
Avant
Après
Événement OnMouseUp
Lorsqu'un bouton de souris est libéré tout en gardant le pointeur sur un élément, l'événement OnMouseup se produit. Il bubble et peut être annulé. Cet événement prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
L'événement Syntax of OnMouseUp est fourni ci-dessous.
Syntaxe HTML
Syntaxe JavaScript
objet.onMouseUp = function () script;Exemple
Dans l'exemple ci-dessus, un bouton apparaîtra. Lorsque vous cliquez avec le bouton droit sur le bouton et relevez tout en gardant le pointeur de la souris sur le bouton, l'événement OnMouse Up se déclenche et la couleur du texte sur le bouton changera en vert.
Sortir
Avant de cliquer avec le bouton.
Après avoir libéré le bouton tout en conservant le pointeur de la souris dessus.
Conclusion
Les événements qui se produisent en raison des mouvements de la souris sont appelés événements de souris JavaScript. Les événements qui sont classés dans la catégorie des événements JavaScript Mouse sont des événements OnClick, un événement OnContextMenu, un événement Ondblclick, un événement OnMoudown, un événement OnMouseenter, un événement OnMouseleave, un événement OnMouseMove, OnMouseout, OnMouseOver Event et OnMouseUp Event. Tous ces événements sont discutés en détail avec un exemple approprié.
A propos de l'auteur
Je suis un professionnel du génie logiciel avec un intérêt profond à écrire. Je poursuis l'écriture technique comme ma carrière à temps plein et je partage mes connaissances à travers mes mots.
Afficher tous les messagesLinux Hint LLC, éditeur @ Linuxhint.com
1309 S Mary Ave Suite 210, Sunnyvale, CA 94087
Politique de confidentialité et conditions d'utilisation