- JavaScript>Variables via Listener -
- Publié le : | Modifié le :
Transmettre des variables lors du clique sur un Listener en JavaScript
Comment transmettre des variables en JavaScript lors du clique sur un lien d'un document HTML.
Utiliser .bind() dans la fonction d'appel du EventListener.
Tout d'abord utiliser addEventListener pour mettre un écouteur sur l'élément qui sera cliqué. Mais ce n'est pas suffisant puisque cet écouteur ne permet pas de transmettre des variables. Il faut utiliser la fonction .bind() pour pouvoir transmettre des variables dans la fonction d'appel lors du clique.
Pour transmettre les paramètres à utiliser .bind(this, param1, param2, ...)
- Bouton.addEventListener("click", move.bind(this, '33'), false);
La fonction d'appel dans cet exemple move():
- function move(b, evt) {
- evt.preventDefault();
- Slider.style.transform = "-webkit-translate(-"+b+"%, 0%)";
- }
Explication
Vous remarquerez que les variables sont décalées, this n'est pas pris en compte par la fonction d'appel, c'est inhérent au .bind(), pour savoir à qui il se réfère. Donc les variables que vous utiliserez dans la fonction d'appel sont au deuxième rang. Dans l'exemple 33 de .bind() correspond au b de move().
il y a aussi la variable evt, dans la fonction d'appel, qui n'apparait pas dans le .bind(), cela fait référence à l'événement du listener. Vous devez le précisez dans la fonction d'appel, mais pas dans le .bind(). Cela vous permettra de gérer l'événement lors du clique. Dans cet exemple, gestion du lien html, pour qu'il ne recharge pas la page.
Visuel
.bind(this, param1, param2, Event).move(this, param1, param2, Event)