Jquery mouseenter () vs mouseover ()

Donc, après avoir lu une question récemment répondue, je ne sais pas si je comprends vraiment la différence entre mouseenter()et mouseover(). Le message déclare

MouseOver ():

Se déclenche en entrant dans un élément et à chaque fois que des mouvements de souris se produisent dans l'élément.

MouseEnter ():

Se déclenchera en entrant dans un élément.

J'ai trouvé un violon qui utilise les deux et ils semblent assez similaires. Quelqu'un peut-il m'expliquer la différence entre les deux?

J'ai également essayé de lire les définitions de JQuery, les deux disent la même chose.

L'événement mouseover est envoyé à un élément lorsque le pointeur de la souris entre dans l'élément

L'événement mouseenter est envoyé à un élément lorsque le pointeur de la souris entre dans l'élément.

Quelqu'un peut-il clarifier avec un exemple?

Vous voyez le comportement lorsque votre élément cible contient des éléments enfants:

http://jsfiddle.net/ZCWvJ/7/

Chaque fois que votre souris entre ou quitte un élément enfant, mouseoverse déclenche, mais pas mouseenter.

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

C'est l'un des meilleurs exemples que j'ai trouvés:

• mouseenter
• survol
• souris
• souris

http://bl.ocks.org/mbostock/5247027

Bien qu'ils fonctionnent de la même manière, l' mouseenterévénement ne se déclenche que lorsque le pointeur de la souris entre dans l'élément sélectionné . L' mouseoverévénement est déclenché si un pointeur de souris entre également des éléments enfants .

Voir l'exemple de code et la démo au bas de la page de documentation jquery:

http://api.jquery.com/mouseenter/

... mouseover se déclenche également lorsque le pointeur se déplace dans l'élément enfant, tandis que mouseenter se déclenche uniquement lorsque le pointeur se déplace dans l'élément lié.

L' événement mouseenter diffère du survol de la souris dans la façon dont il gère le bullage d'événement . L' événement mouseenter ne déclenche son gestionnaire que lorsque la souris entre dans l'élément auquel il est lié, pas dans un descendant . Reportez-vous: https://api.jquery.com/mouseenter/

L' événement mouseleave diffère de mouseout par la manière dont il gère le bullage d'événement . L' événement mouseleave ne déclenche son gestionnaire que lorsque la souris quitte l'élément auquel elle est liée, pas un descendant . Reportez-vous: https://api.jquery.com/mouseleave/

Cet exemple montre la différence entre les événements mousemove , mouseenter et mouseover :

https://jsfiddle.net/z8g613yd/

HTML:

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

CSS:

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS:

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

• onmousemove : se produit chaque fois que le pointeur de la souris est déplacé sur l'élément div.
• onmouseenter : se produit uniquement lorsque le pointeur de la souris entre dans l'élément div.
• onmouseover : se produit lorsque le pointeur de la souris entre dans l'élément div et ses éléments enfants (p et span).

Ancienne question, mais toujours pas de bonne réponse à jour avec perspicacité imo.

De nos jours, tous les navigateurs prennent en charge mouseover/mouseoutet mouseenter/mouseleave. Néanmoins, jQuery n'enregistre pas votre gestionnaire dans mouseenter/mouseleave, mais les place silencieusement sur un wrappers mouseover/mouseoutcomme le montre le code suivant et fait sa propre interprétation légèrement différente de mouseenter/mouseleave.

Le comportement exact des événements est particulièrement pertinent sur les «gestionnaires délégués». Malheureusement, jQuery a également sa propre interprétation différente de ce que sont les gestionnaires de délégués et de ce qu'ils devraient recevoir pour les événements. Ce fait est montré dans une autre réponse pour l'événement de clic plus simple.

Alors, comment répondre correctement à une question sur jQuery, qui utilise un libellé Javascript pour les événements et les gestionnaires, mais rend les deux différents et ne le mentionne même pas dans sa documentation?

Tout d'abord les différences dans le «vrai» Javascript:

• tous les deux
  • la souris peut «sauter» des éléments extérieurs / extérieurs aux éléments intérieurs / intérieurs lorsqu'elle est déplacée plus rapidement que le navigateur échantillonne sa position
  • any enter/overobtient un correspondant leave/out(éventuellement en retard / nerveux)
  • les événements vont à l'élément visible sous le pointeur (invisible → ne peut pas être cible)
• mouseenter/mouseleave
  • est livré à l'élément où enregistré (cible)
  • chaque fois que l'élément ou un descendant (par exemple en sautant) est entré / laissé
  • il ne peut pas bouillonner, car conceptuellement les descendants sont considérés comme faisant partie de l'élément en question, c'est-à-dire qu'il n'y a pas d'enfants d'où un autre événement pourrait provenir (avec le sens de «entré / laissé» le parent?!)
  • les enfants peuvent également avoir des gestionnaires similaires enregistrés, qui entrent / sortent correctement, mais sans rapport avec le cycle d'entrée / sortie des parents
• mouseover/mouseout
  • la cible est l'élément réel sous le pointeur
    • une cible ne peut pas être deux choses: c'est-à-dire pas un parent et un enfant en même temps
  • l'événement ne peut pas «s'emboîter»
    • avant qu'un enfant puisse être «dépassé», le parent doit «sortir»
  • peut bouillonner, car target / relatedTarget indique où l'événement s'est produit

Après quelques tests, cela montre que tant que vous n'utilisez pas de «gestionnaires de délégués avec enregistrement de sélecteur» jQuery, l'émulation est inutile mais raisonnable: elle filtre les mouseover/mouseoutévénements que a mouseenter/mouseleaven'obtiendrait pas. La cible est cependant foirée. Le real mouseenter/mouseleavedonnerait l'élément handler comme cible, l'émulation pourrait indiquer les enfants de cet élément, c'est-à-dire quel que soit le mouseover/mouseoutporté.

const list = document.getElementById('log');
const outer = document.getElementById('outer');
const $outer = $(outer);

function log(tag, event) {
  const li = list.insertBefore(document.createElement('li'), list.firstChild);
  // only jQuery handlers have originalEvent
  const e = event.originalEvent || event;
  li.append(`${tag} got ${e.type} on ${e.target.id}`);
}

outer.addEventListener('mouseenter', log.bind(null, 'JSmouseenter'));
$outer.on('mouseenter', log.bind(null, '$mouseenter'));

div {
  margin: 20px;
  border: solid black 2px;
}

#inner {
  min-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id=outer>
    <ul id=log>
    </ul>
  </div>
</body>