Regarde sur cette page : http://api.jquery.com/mouseenter/
Vers le milieu de la page il y a un exemple (les deux blocs jaunes) qui illustre bien la différence entre l'évènement standard mouseover et l'évènement jQuery mouseenter, que tu cherches à reproduire.
Sinon, quelques explication à propos de addEventListener : cette fonction permet, comme je te l'ai montré, de surveiller un évènement. Elle prend 3 paramètres : une chaîne, une fonction et un booléen.
- La chaîne est le nom de l'évènement ; dans notre cas c'est mouseover.
- La fonction est ce qui doit être exécuté lorsque l'évènement est déclenché. Elle est appelée par le navigateur et reçoit comme argument un objet Event.
- Le booléen indique si on doit utiliser la capture ou pas. C'est une notion un peu avancée. Ça aurait pu être pratique si tous les navigateurs implémentaient cette fonctionnalité, mais en général on préfère ne pas l'utiliser, alors on met false.
Sous MSIE, la fonction s'appelle attachEvent et il y a deux différences : d'abord, les noms d'évènements commencent par « on », et ensuite, il ne propose pas d'utiliser la capture.
Par conséquent, on trouve souvent sur le Web une fonction qui permet d'assurer la compatibilité de son script sous la plupart des navigateurs et qui ressemble, avec peu de variations, à ceci :
1 2 3 4 5 6 7
| function addListener( elem, event, func ) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else {
elem.attachEvent('on' + event, func);
}
} |
On peut donc surveiller un évènement comme ceci :
1 2 3
| addListener($ma_div, 'mouseover', function( e ) {
// ... ton code ici
}); |
En résumé, tu avais bon en 1/, 2a/ et 2c/ ![:mrgreen:](https://www.developpez.net/forums/images/smilies/icon_mrgreen.gif)
Pour 2c/, en effet, tu peux réutiliser ta fonction menu mais il te faudra quand même la modifier si tu veux pouvoir utiliser les informations de l'objet Event comme je t'ai expliqué.
Pour 2b/, je pense que ce qui te met dedans, c'est le fait que mes fonctions n'ont pas de nom (ce sont des fonctions anonymes), du coup tu as confondu le nom du paramètre (e) avec le nom de la fonction. Il est tout à fait possible de nommer la fonction :
addListener($ma_div, 'mouseover', function bidule( e ) { ... });
ou encore de la déclarer à l'avance pour pouvoir l'utiliser plusieurs fois :
1 2 3 4
| function bidule( e ) {
...
}
addListener($ma_div, 'mouseover', bidule); |
Note que je ne mets pas de parenthèses quand je passe bidule à la fonction addListener : je veux que la fonction soit référencée, et pas appelée directement.
Voilà, j'espère que ça lève le voile sur certaines zones d'ombres dans ton esprit ![;)](https://www.developpez.net/forums/images/smilies/icon_wink.gif)
PS : Ce n'est que mon point de vue personnel, mais je trouve que ton effet de rebond est un peu maladroit :/ J'ai moi-même fait pas mal d'essais et de recherches il y a quelques temps pour parvenir à un effet qui me convienne, et j'ai découvert que ça porte un nom : easing. D'après les rumeurs, le terme a été introduit par Adobe pour son Flash Player, mais il a été popularisé par la communauté jQuery. En tout cas,fais des recherches à propos de l'easing sur le Web, ça ne peut que t'enrichir
Partager