Quelle est la différence entre les événements mouseover et mouseenter ?

Question

J'ai toujours utilisé l'événement mouseover, mais en lisant la documentation de jquery, j'ai trouvé mouseenter. Ils semblent fonctionner exactement de la même manière. Y a-t-il une différence entre les deux, et si oui, quand dois-je les utiliser ? (Cela vaut également pour mouseout et mouseleave)

Answer 1

Vous pouvez l'essayer aquí sur la page de documentation de jQuery. Il s'agit d'une jolie petite démo interactive qui rend les choses très claires et que vous pouvez voir par vous-même.

En bref, vous remarquerez qu'un événement de survol de la souris se produit sur un élément lorsque vous vous trouvez au-dessus de lui - qu'il provienne de son élément enfant OU parent, mais qu'un événement d'entrée de la souris ne se produit que lorsque la souris se déplace de l'élément parent vers l'élément.

Answer 2

Mouseenter et mouseleave ne pas réagissent au bouillonnement d'événements, tandis que le passage de la souris et la sortie de la souris faire .

Voici un article qui décrit le comportement.

Answer 3

Comme c'est souvent le cas avec des questions comme celles-ci, Quirksmode a la meilleure réponse .

J'imagine que, comme l'un des objectifs de jQuery est de rendre les choses indifférentes aux navigateurs, l'utilisation de l'un ou l'autre nom d'événement déclenchera le même comportement. Edit : grâce à d'autres posts, je vois maintenant que ce n'est pas le cas

Answer 4

Cela l'explique assez bien aquí

Answer 5

$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });