Lectures connexes:
JavaScript Event Learning Résumé (V) Type d'événement de souris en JS
//www.vevb.com/article/86259.htm
JavaScript Event Learning Résumé (i) Flux d'événements
//www.vevb.com/article/86261.htm
JavaScript Event Learning Résumé (iv) Membres publics de l'événement (propriétés et méthodes)
//www.vevb.com/article/86262.htm
JavaScript Event Learning Résumé (ii) JS Événements JS
//www.vevb.com/article/86264.htm
JavaScript Event Learning Résumé (III) Objet de l'événement JS
Événements de souris
9 Les événements de souris sont définis dans l'événement de niveau DOM3.
MousDown: déclenché lorsque le bouton de la souris est enfoncé (gauche ou à droite).
Ne peut pas être déclenché par le clavier.
MouseUp: déclenché lorsque le bouton de la souris est libéré et apparaît.
Ne peut pas être déclenché par le clavier.
Cliquez sur: déclenché lorsque vous cliquez sur le bouton gauche de la souris ou en appuyant sur la touche Entrée. Ceci est important pour assurer l'accessibilité, ce qui signifie que le gestionnaire d'événements OnClick peut être exécuté à la fois via le clavier et via la souris. DBLClick: déclenché lorsque le bouton gauche de la souris est double-cliqué. MouseOver: déplacez la souris sur l'élément cible. Cela tirera lorsque la souris se déplacera sur ses éléments descendant. Mouseout: Mouse supprime l'élément cible ci-dessus.
MouseEnter: La souris se déplace dans la plage de l'élément et déclenche l'événement, qui ne bouillonne pas, c'est-à-dire qu'il ne déclenchera pas lorsque la souris se déplace vers ses éléments descendants.
Mouseleave: déclenché lorsque la souris sort de la plage d'éléments, et l'événement ne bouillonne pas, c'est-à-dire qu'il ne se déclenchera pas lorsque la souris se déplace vers ses éléments descendants.
MOUSEMOVE: La souris est constamment déclenchée lorsqu'elle se déplace à l'intérieur de l'élément.
Ne peut pas être déclenché par le clavier.
note:
Les événements Mousedown et Mouseup sont déclenchés successivement sur un élément pour déclencher l'événement de clic. L'événement DBLClick ne sera déclenché que si deux événements de clic sont tirés l'un après l'autre.
Si l'un de Mousedown ou MouseUp est annulé, l'événement Click ne sera pas déclenché. Si l'événement de clic est annulé directement ou indirectement, l'événement DBLClick ne sera pas déclenché.
1. L'ordre des événements déclenchent
Par exemple: double-cliquez sur le bouton et jetez un œil à l'événement déclenché ci-dessus.
<body> <input id = "btn" type = "bouton" value = "cliquez" /> <cript> var btn = document.getElementById ("btn"); btn.addeventListener ("Mousedown", fonction (événement) {console.log ("MousDown");}, false); btn.addeventListener ("mouseup", function () {console.log ("mouseup");}, false); btn.addeventListener ("cliquez", fonction () {console.log ("cliquez");}, false); btn.addeventListener ("dblclick", function () {console.log ("dblclick");}, false); </cript> </ body>2. La différence entre Mouseenter et MouseOver
La différence:
L'événement Mouseover bubblera, ce qui signifie qu'il tirera lorsque la souris se déplacera vers ses éléments descendants.
L'événement Mouseenter ne bouillonne pas, ce qui signifie que la souris ne tirera pas lorsqu'elle se déplacera vers ses éléments descendants.
Par exemple:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <tapie> </ title> <style> #outer {position: absolue; Largeur: 200px; hauteur: 200px; en haut: 0; à gauche: 0; en bas: 0; à droite: 0; marge: auto; Color en arrière-plan: rose; } #inner {position: absolue; Largeur: 100px; hauteur: 100px; en haut: 50%; Gauche: 50%; marge-gauche: -50px; Color en arrière-plan: orange; Texte-aligne: Centre; hauteur de ligne: 100px; } # exter, # Inner {Border-Radius: 50%; } </ style> <script src = "jQuery-2.1.1.min.js"> </ script> </ head> <body> <body> <div id = "exter"> <div id = "Inner"> </div> </div> </ body> <script> var parentDiv = Document.getElementyId (");); ParentDiv Console.log ("l'événement Mouseover du parent div est déclenché");}, false); // parentDiv.AddeventListener ("MouseEnter", function () {// console.log ("l'événement de souris de la Parent Div est déclenchée"); //}, false); // ParenteDiv.AddeventListener ("Mouseout", Fonction);); console.log ("L'événement Mouseout du parent div est déclenché"); //}, false); // parentDiv.addeventListener ("Mouseleave", function () {// console.log ("l'événement Mouseleave du parent div est tiré"); //}, false);note:
Mouseover correspond à Mouseout, Mouseenter correspond à Mouseleave. L'effet peut être non en pavé dans le code ci-dessus.
L'API de volante en jQuery combine le souris et la mouse à utiliser.
3. Boutons de souris gauche et droite
<script type = "text / javascript"> document.onmousedown = function (ev) {var oevent = ev || event; alerte (oevent.button); // Le bouton gauche de la souris dans IE est 1, le bouton droit de la souris est 2, et le bouton gauche de la souris en FF et le bouton droit de la souris en Chrome est 0, le bouton droit de la souris est 2}; </cript>4. La différence entre Mouseover et Mousemove
D'une manière générale, Mouseover est suffisant, mais Mousemove n'est utilisé que dans des circonstances particulières. MouseMove est plus consommateur de ressources, comme la surveillance des changements dans les coordonnées de la souris.
Ce qui précède est le résumé de l'apprentissage des événements JavaScript qui vous est présenté par les connaissances liées à l'éditeur (V) sur les événements de souris des types d'événements dans JS. J'espère que ce sera utile à tous!