déclencher des choses selon un événement¶

quelques événements¶

click : au clic
mousemove : la souris bouge sur l’élément
mouseenter : la souris entre au survol sur l’élément
mouseout : la souris sort du survol de l’élément
mousedown : le clic de la souris est enclenché
mouseup : le clic de la souris est relâché

quelques éléments sur lequels déclencher un événement¶

document.body : l’élément <body> de la page web
⚠️ document.querySelector('g') : le premier élément <g> de la page (votre animation dans ce contexte) ⚠️ voir avertissement ci-dessous
document.querySelector('#exemple') : élément avec l’id « exemple »

Avertissement

Si vous essayez de sélectionner un élément avant son ajout au DOM (à la page), il ne pourra pas l’être. Aussi, si vous sélectionner votre animation avant son ajout, cela va poser problème, il faudra procéder comme suit.

votre_animation.addEventListener( "DOMLoaded", main );

function main () {
   var groupe = document.querySelector('g');
   // reste du code à exécuter
}

exemples d’application¶

Dans le fichier master.js par exemple

// lors du clic sur la page, on exécute la fonction ci-dessous
document.body.addEventListener( 'click', fonction_a )

function fonction_a () {
   //
}

votre_animation.addEventListener( "DOMLoaded", main );

function main () {
   var groupe = document.querySelector('g');

   groupe.addEventListener( 'mouseenter', fonction_a )
   groupe.addEventListener( 'mouseenter', fonction_b )
}

function fonction_a () {
   //
}

function fonction_b () {
   //
}