## Mouseover vs Mouseenter : quand devez-vous utiliser chaque événement ?

Comprendre les différences entre les événements Mouseover et Mouseenter

Dans le développement Web, les événements mouseover et mouseenter sont souvent utilisés pour les fonctionnalités liées au survol. Bien qu'ils puissent sembler se comporter de la même manière, il existe des distinctions subtiles entre les deux.

Propagation des événements

La principale différence entre les événements mouseover et mouseenter réside dans leur propagation d'événement. . Mouseover est un événement bouillonnant qui se propage dans la hiérarchie DOM, tandis que mouseenter est un événement sans bulle qui se produit uniquement sur l'élément ciblé.

Cela signifie que les événements mouseover peuvent être déclenchés lorsque le curseur de la souris entre dans un élément à l'intérieur. un conteneur, tandis que les événements mouseenter ne se produisent que lorsque le curseur entre dans l'élément cible lui-même.

Démo interactive

Pour illustrer ce concept, reportez-vous à la démonstration jQuery suivante :

var i = 0;<br>$("div.overout ")<br> .mouseover(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">i += 1;
$(this).find("span").text("mouse over x " + i);

Copier après la connexion

})
.mouseout(function() {

$(this).find("span").text("mouse out ");

});

var n = 0;
$("div.enterleave")
.mouseenter(function() {

n += 1;
$(this).find("span").text("mouse enter x " + n);

})
.mouseleave(function() {

$(this).find("span").text("mouse leave");

});

div.out {<br> largeur : 40 % ; <br> hauteur : 120px;<br> marge : 0 15px;<br> couleur de fond : #d6edfc;<br> float : gauche;<br>}</p>
<p>div.in {<br> largeur : 60%;<br> hauteur : 60%;<br> couleur de fond : #fc0;<br> marge : 10px auto;<br>}</p>
<p>p {<br> hauteur de ligne : 1em ;<br> margin : 0;<br> padding : 0;<br>}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></p>
<p><div class="out overout "><br> <span>déplacez votre souris</span><br> <div class="in"><br> </div><br></div></p>
<p><div class="out enterleave"><br> <span>déplacez votre souris</span><br> <div class="in"><br> </div><br></div>

Dans cette démo, l'événement mouseover est attaché à l'élément "overout", et l'événement mouseenter est attaché à l'élément "enterleave". Lorsque vous déplacez votre souris sur le conteneur "overout", le nombre d'événements de survol est incrémenté même lorsque vous passez sur l'élément interne "in". En revanche, le conteneur « enterleave » n'incrémente le nombre d'événements mouseenter que lorsque la souris entre dans le conteneur lui-même.

Quand utiliser chaque événement

En fonction de leur événement distinct comportement de propagation, il est recommandé d'utiliser l'événement mouseover lorsque vous devez gérer le survol de n'importe quel élément dans un conteneur, que le curseur de la souris entre ou non dans le conteneur lui-même. D'un autre côté, utilisez l'événement mouseenter lorsque vous souhaitez spécifiquement gérer le survol uniquement sur un élément cible désigné.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!