Il est possible d’activer/de désactiver dynamiquement un gestionnaire d’événements.
Pour créer un gestionnaire d’événement à la volée, vous appliquerez la méthode on() à l’élément jQuery concerné :
on('événement',function(e){
//Traitement de l'événement
}
Pour supprimer un gestionnaire d’événements à la volée, vous appliquerez la méthode off() à l’élément jQuery concerné :
off('événement')
A titre d’exemple, ce code définit/annule un gestionnaire d’événements lié au clic sur l’image d’identifiant #target :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gestionnaire d'événements dynamique</title>
</head>
<body>
<script src="jquery.js"></script>
<img id="target" src="desert.jpg"><br/>
<button id="activer">Activer le clic</button>
<button id="desactiver">Désactiver le clic</button>
<script>
$(function() {
$('#activer').click(function(){
$('#target').on('click',function(e){
var largeur = $('#target').width();
$('#target').css('width',largeur+10);
});
});
$('#desactiver').click(function(){
$('#target').off('click');
});
});
</script>
</body>
</html>
Lorsque l’utilisateur clique sur le bouton d’identifiant #activer :
$('#activer').click(function(){
Un gestionnaire d’événements est mis en place concernant le clic sur l’image :
$('#target').on('click',function(e){
A chaque clic sur l’image, sa largeur est augmentée de 10 pixels :
var largeur = $('#target').width();
$('#target').css('width',largeur+10);
Lorsque l’utilisateur clique sur le bouton d’identifiant #desactiver, le gestionnaire d’événements lié au clic sur l’image est supprimé :
$('#desactiver').click(function(){
$('#target').off('click');
});
Exercice
En partant du code ci-dessous :
- Reliez au premier bouton un gestionnaire d’événements qui affiche les coordonnées du pointeur lorsqu’il est au-dessus de l’image.
- Annulez ce gestionnaire d’événements au clic sur le deuxième bouton.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gestionnaire d'événements dynamique</title>
</head>
<body>
<script src="jquery.js"></script>
<img id="target" src="chat.jpg" draggable><br/>
Position du pointeur <span id="xy"></span><br/>
<button id="activer">Afficher la position du pointeur</button>
<button id="desactiver">Ne pas afficher la position du pointeur</button>
<script>
$(function() {
//Insérer le code ici
});
</script>
</body>
</html>
Voici le résultat à obtenir :
Solution
Voici le code jQuery à utiliser :
$(function() {
$('#activer').click(function(){
$('#target').on('mousemove',function(e){
var y = e.pageY;
var x = e.pageX;
$('#xy').html("x = " + x + ", y = " + y);
});
});
$('#desactiver').click(function(){
$('#target').off('mousemove');
});
});
Lorsque le premier bouton est cliqué :
$('#activer').click(function(){
Un gestionnaire d’événements est mis en place sur l’événement mousemove de l’image #target :
$('#target').on('mousemove',function(e){
Les coordonnées du pointeur sont alors affichées dans le span d’id #xy :
var y = e.pageY;
var x = e.pageX;
$('#xy').html("x = " + x + ", y = " + y);
Lorsque le deuxième bouton est cliqué, l’événement mousemove n’est plus pris en compte sur l’image #target :
$('#desactiver').click(function(){
$('#target').off('mousemove');
});
