FAQ MooToolsConsultez toutes les FAQ

Nombre d'auteurs : 6, nombre de questions : 67, dernière mise à jour : 2 septembre 2018 

 
OuvrirSommaireLa gestion des évènements

Pour connaitre la touche enfoncée par l'utilisateur dans un input ou un textarea, on peut définir l'évènement keydown en passant event comme paramètre de la fonction qui sera exécutée. Comme résultat, on peut obtenir le caractère de la touche ou bien son code.

1) Commençons par le caractère :

 
Sélectionnez
<input type="text" id="id_input" />
 
Sélectionnez
$('id_input').addEvent('keydown', recuperer_touche);

function recuperer_touche(event)
{
   alert(event.key);
}

Ça ne rend que les lettres sans accent. Les chiffres ne sont pas donnés via le pavé numérique mais par les touches doubles accents/caractères particuliers et chiffres, sans devoir appuyer sur majuscule. Les caractères particuliers ne sont pas totalement accessibles.

Cependant, Tabulation, Espace, Back Space, Delete, Enter (pas celui du pavé numérique) et les flèches sont récupérés.


2) Si l'on désire récupérer le code, c'est ainsi :

 
Sélectionnez
function recuperer_touche(event)
{
   alert(event.code);
}


3) Des touches spéciales :

De même, on peut vérifier si les touches alt (pas Alt Gr), shift, contrôle ou méta sont enfoncées :

 
Sélectionnez
function recuperer_touche(event)
{ 
   //renvoie true ou false
   alert(event.alt);
   alert(event.shift);
   alert(event.control);
   alert(event.meta);
}
Créé le 31 décembre 2010  par vermine

Lien : Page de test

Prenons le cas d'une case à cocher. Si on clique dessus, elle se coche. Nous pouvons l'empêcher de se cocher lors d'un clic. C'est preventDefault qui permet d'annuler le comportement par défaut d'un élément. Elle a besoin du paramètre event :

 
Sélectionnez
Tu ne me cocheras pas : <input id="ma_checkbox" type="checkbox" />
 
Sélectionnez
$('ma_checkbox').addEvent('click', function(event){
    event.preventDefault();
});


Ce qui marche aussi avec d'autres éléments comme le bouton submit d'un formulaire :

 
Sélectionnez
<form action="http://www.developpez.com">
<input id="mon_bouton" type="submit" />
</form>
 
Sélectionnez
$('mon_bouton').addEvent('click', function(event){
    event.preventDefault();
});


Ce résultat peut également s'obtenir avec la méthode stop de DOMEvent. En plus d'annuler le comportement par défaut, cette méthode arrête la propagation de l'évènement.

 
Sélectionnez
$('mon_bouton').addEvent('click', function(event){
    event.stop();
});
Mis à jour le 1er décembre 2012  par vermine

Lien : Page de test

1) MooTools permet d'ajouter des évènements sur des éléments

C'est la méthode addEvent qui est utilisée. Pour exemple, nous définissons cette div :

 
Sélectionnez
<div id="id_div">Ceci n'est pas une div !</div>

Lorsqu'on entrera dans sa zone, nous allons lui changer sa couleur de fond. Ensuite, on lui lancera une alerte lors d'un clic sur la div, puis, lorsqu'on quittera la div, on remettra la couleur de fond à blanc. Peu importe l'ordre dans lequel on définit les évènements :

 
Sélectionnez
var ma_div = $('id_div');

//Ajouter une alerte lorsqu'on clique
ma_div.addEvent('click', function(){
   alert("Ni une pipe, d'ailleurs.");
});

//Changer la couleur lorsqu'on passe sur la div
ma_div.addEvent('mouseenter', function(){
   ma_div.setStyle('background-color', '#6E9D47');
});

//Changer la couleur lorsqu'on quitte la div
ma_div.addEvent('mouseleave', function(){
   ma_div.setStyle('background-color', '#FFFFFF');
});


2) Ajouter plusieurs évènements

Naturellement, nous pouvons ajouter plusieurs évènements en même temps avec addEvents. C'est une écriture simplifiée et plus lisible :

 
Sélectionnez
var ma_div = $('id_div');

ma_div.addEvents({
    'click': function(){
        alert("Ni une pipe, d'ailleurs.");
    },
    'mouseenter': function(){
        ma_div.setStyle('background-color', '#6E9D47');
    },
    'mouseleave': function(){
        ma_div.setStyle('background-color', '#FFFFFF');
    }
});
Créé le 1er décembre 2012  par vermine, NoSmoking

1) MooTools permet de supprimer un évènement

Bien entendu, on peut supprimer ce qu'on a ajouté grâce à la méthode removeEvent :

 
Sélectionnez
var ma_div = $('id_div');

/* Les fonctions définies autre part */
function changecouleur()
{
   ma_div.setStyle('background-color', '#6E9D47');
}

function supprime()
{
   ma_div.removeEvent('mouseenter', changecouleur);
}


/* Dans le DomReady */
//Changer la couleur lorsqu'on passe sur la div
ma_div.addEvent('mouseenter', changecouleur);

//Supprimer le mouseenter lorsqu'on clique
ma_div.addEvent('click', supprime);


2) Supprimer plusieurs évènements du même type

On parle ici d'évènements du même type. Donc si nous avions défini plusieurs évènements click sur l'élément, on peut tous les retirer d'un coup avec removeEvents :

 
Sélectionnez
ma_div.removeEvents('click'); 
Créé le 1er décembre 2012  par vermine

Un enfant hérite des évènements définis sur son parent. Pour éviter cela, on peut stopper la propagation en le précisant sur les enfants. Il existe la méthode stop mais on lui préfère sa grande sœur qui est cross browser stopPropagation. On lui passe donc le paramètre event :

 
Sélectionnez
<div id="id_div">Ceci n'est pas une div !<br>
   <i><span id="id_span">R. Magritte</span></i>
</div>

Imaginons que nous mettions un clic sur la div mais que nous ne voulons pas le déclencher sur le span :

 
Sélectionnez
//Ajouter une alerte lorsqu'on clique sur la div
var ma_div = $('id_div');
ma_div.addEvent('click', function(){
   alert("Ni une pipe, d'ailleurs.");
});

//Retirer le clic uniquement pour le span
var mon_span = $('id_span');
id_span.addEvent('click', function(event){
   event.stopPropagation(); 
});
Mis à jour le 1er décembre 2012  par vermine, NoSmoking

Lien : Page de test
Lien : Présentation des évènements du DOM

Il existe différentes propriétés pour les évènements dont celles-ci : page.x, page.y, client.x, client.y. La propriété page prend en compte toute la page tandis que la propriété client se contente de prendre la page visible. C'est-à-dire que la partie non visible (mais accessible par les scrollbars) est prise en compte ou non lors du calcul de la position.

La position se détermine évidemment de haut en bas et de gauche à droite.

Voici un petit exemple :

 
Sélectionnez
var monElement = $('id_body');

monElement.addEvent('click', function(event){
   alert('x: ' + event.page.x + '\ny: ' + event.page.y); 
});
Créé le 31 décembre 2010  par vermine

Lien : Exemple

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.