FAQ MooToolsConsultez toutes les FAQ

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 :

<input type="text" id="id_input" />

$('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 :

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 :

function recuperer_touche(event)
{ 
   //renvoie true ou false
   alert(event.alt);
   alert(event.shift);
   alert(event.control);
   alert(event.meta);
}

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 :

Tu ne me cocheras pas : <input id="ma_checkbox" type="checkbox" />

$('ma_checkbox').addEvent('click', function(event){
    event.preventDefault();
});

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

<form action="http://www.developpez.com">
<input id="mon_bouton" type="submit" />
</form>

$('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.

$('mon_bouton').addEvent('click', function(event){
    event.stop();
});

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 :

<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 :

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 :

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');
    }
});

1) MooTools permet de supprimer un évènement

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

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 :

ma_div.removeEvents('click'); 

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 :

<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 :

//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(); 
});

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 :

var monElement = $('id_body');

monElement.addEvent('click', function(event){
   alert('x: ' + event.page.x + '\ny: ' + event.page.y); 
});