diff options
Diffstat (limited to 'files/fr/web/api/element/mouseenter_event/index.html')
| -rw-r--r-- | files/fr/web/api/element/mouseenter_event/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html new file mode 100644 index 0000000000..02fcb024bd --- /dev/null +++ b/files/fr/web/api/element/mouseenter_event/index.html @@ -0,0 +1,157 @@ +--- +title: 'Element : évènement mouseenter' +slug: Web/API/Element/mouseenter_event +tags: + - API + - DOM + - Element + - Interface + - Reference + - mouseenter +translation_of: Web/API/Element/mouseenter_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">L'évènement <strong><code>mouseenter</code></strong> est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Notes_dutilisation">Notes d'utilisation</h2> + +<p>Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, <code>mouseenter</code> est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.</p> + +<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> +<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div> +<code>mouseenter</code> est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte. + +<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div> +Un seul évènement <code>mouseover</code> est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.</div> + +<p>Avec des hiérarchies profondes, le nombre d'évènements <code>mouseenter</code> envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements <code>mouseover</code>.</p> + +<p>Avec la combinaison de <code>mouseenter</code> et <code>mouseleave</code> (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>La documentation <a href="/fr/docs/Web/API/Element/mouseover_event#Exemples"><code>mouseover</code></a> illustre la différence entre <code>mouseover</code> et <code>mouseenter</code>.</p> + +<p>Ici, on utilise <code>mouseenter</code> pour modifier la bordure d'un <code>div</code> lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements <code>mouseenter</code> ouor <code>mouseleave</code> event.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id='mouseTarget'> + <ul id="unorderedList"> + <li>No events yet!</li> + </ul> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<p>On met en forme le <code>div</code> pour le rendre plus visible.</p> + +<pre class="brush: css">#mouseTarget { + box-sizing: border-box; + width:15rem; + border:1px solid #333; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var enterEventCount = 0; +var leaveEventCount = 0; +const mouseTarget = document.getElementById('mouseTarget'); +const unorderedList = document.getElementById('unorderedList'); + +mouseTarget.addEventListener('mouseenter', e => { + mouseTarget.style.border = '5px dotted orange'; + enterEventCount++; + addListItem("C'est le " + enterEventCount + "ème mouseenter."); +}); + +mouseTarget.addEventListener('mouseleave', e => { + mouseTarget.style.border = '1px solid #333'; + leaveEventCount++; + addListItem("C'est le " + leaveEventCount + "ème mouseleave."); +}); + +function addListItem(text) { + // On crée un nouveau noeud text avec le texte fourni + var newTextNode = document.createTextNode(text); + + // On crée un élément li + var newListItem = document.createElement("li"); + + // On ajoute le noeud texte à l'élément li + newListItem.appendChild(newTextNode); + + // On ajoute l'élément de liste à la liste + unorderedList.appendChild(newListItem); +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Element.mouseenter_event")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> + <li>D'autres évènements connexes + <ul> + <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li> + <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> + <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li> + <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li> + <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> + <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> + <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> + <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> + <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> + <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> + </ul> + </li> +</ul> |