JavaScript : déplacer la souris : mouseover/out, mouseenter/leave
Comprendre les événements de mouvement de la souris en JavaScript : mouseover, mouseout, mouseenter et mouseleave
Les événements de mouvement de la souris en JavaScript offrent aux développeurs la possibilité de réagir au déplacement du curseur sur les éléments d’une page web. Ces événements sont essentiels pour créer des interfaces interactives et réactives qui répondent aux actions de l’utilisateur. Ce guide explorera les différences entre les événements mouseover, mouseout, mouseenter et mouseleave, en proposant des exemples pratiques pour démontrer leur utilisation.
Types d’événements de mouvement de la souris
Mouseover et Mouseout
mouseover: Cet événement se déclenche lorsque la souris entre dans l’élément ou dans l’un de ses enfants. Il est utile pour déclencher des réactions lorsque le curseur de la souris entre dans une zone spécifique, y compris les zones couvertes par des éléments enfants.mouseout: À l’inverse, cet événement se déclenche lorsque la souris quitte l’élément ou l’un de ses enfants. Commemouseover, il prend en compte les mouvements d’entrée et de sortie des éléments enfants.
Mouseenter et Mouseleave
mouseenter: Cet événement est similaire àmouseover, mais ne bulle pas et ne se déclenche pas lorsque la souris passe sur un élément enfant. Il est parfait pour déclencher une réaction lorsque la souris entre pour la première fois dans les limites de l’élément.mouseleave: Cet événement se déclenche lorsque la souris quitte les limites de l’élément et, commemouseenter, ne bulle pas et n’est pas déclenché par le déplacement hors des éléments enfants.
Exemples pratiques d’événements de mouvement de la souris
Ces exemples montrent comment implémenter des événements de mouvement de la souris pour améliorer l’expérience utilisateur grâce à des éléments interactifs.
Exemple 1 : utiliser Mouseover et Mouseout
Cet exemple montre comment changer la couleur d’arrière-plan d’un bloc lorsque le curseur de la souris y entre et en sort, y compris via ses éléments enfants.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouseover and Mouseout Example</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightblue;
}
#innerBox {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 50px;
}
</style>
</head>
<body>
<div id="box">
Hover over me!
<div id="innerBox"></div>
</div>
<script>
document.getElementById('box').addEventListener('mouseover', function() {
this.style.backgroundColor = 'cyan';
});
document.getElementById('box').addEventListener('mouseout', function() {
this.style.backgroundColor = 'lightblue';
});
</script>
</body>
</html>Explication :
- L’événement
mouseoverchange la couleur d’arrière-plan du bloc en cyan, y compris lorsque l’on survole le bloc interne. - L’événement
mouseoutréinitialise la couleur d’arrière-plan lorsque la souris quitte le bloc, en tenant également compte du bloc interne.
Exemple 2 : implémenter Mouseenter et Mouseleave
Cet exemple améliore l’interaction utilisateur en montrant comment utiliser mouseenter et mouseleave pour une réaction plus spécifique, sans affecter les éléments enfants.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouseenter and Mouseleave Visual Example</title>
<style>
#parent {
width: 400px;
height: 300px;
background-color: lightblue; /* Initial background color */
padding: 20px;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
transition: background-color 0.3s ease;
}
.child {
width: 90px;
height: 90px;
background-color: lightsalmon;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
#feedback {
position: fixed;
bottom: 10px;
left: 10px;
background: white;
padding: 10px;
border: 1px solid #ccc;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="parent">
Parent Element
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
<div id="feedback">Hover over elements to see interactions.</div>
<script>
const parent = document.getElementById('parent');
const children = document.querySelectorAll('.child');
const feedback = document.getElementById('feedback');
parent.addEventListener('mouseenter', function() {
parent.style.backgroundColor = 'cyan'; // Highlight the parent on mouse enter
feedback.textContent = 'Mouse entered the parent element';
});
parent.addEventListener('mouseleave', function() {
parent.style.backgroundColor = 'lightblue'; // Revert color on mouse leave
feedback.textContent = 'Mouse left the parent element';
});
// Update feedback for child interactions
children.forEach(child => {
child.addEventListener('mouseenter', function() {
feedback.textContent = `Mouse entered ${this.textContent}`;
this.style.backgroundColor = '#ffcccb'; // Highlight child on mouse enter
});
child.addEventListener('mouseleave', function() {
feedback.textContent = `Mouse left ${this.textContent}`;
this.style.backgroundColor = 'lightsalmon'; // Revert child color on mouse leave
});
});
</script>
</body>
</html>Cet exemple montre clairement comment les événements mouseenter et mouseleave se déclenchent de manière spécifique et ne bullent pas, ce qui permet des interactions distinctes et isolées avec des éléments imbriqués.
Conclusion
Les événements de mouvement de la souris permettent aux développeurs de créer des interactions nuancées basées sur le comportement de la souris de l’utilisateur, renforçant ainsi le dynamisme et la réactivité des applications web. En comprenant les comportements spécifiques de mouseover, mouseout, mouseenter et mouseleave, vous pouvez adapter la gestion des événements pour répondre efficacement aux exigences de conception et de fonctionnalité de divers composants web.
Practice
What are the key differences between Mouseover/Mouseout and Mouseenter/Mouseleave events in JavaScript?