Une nouvelle version de MooTools est disponible, c'est la version 1.4.0 qui impacte MooTools Core et MooTools More.

Un grand nombre de changements a été communiqué pour la version 2.0, mais l'équipe Mootools a préféré nous faire profiter directement de plusieurs bonnes choses.

Il y a bien évidemment de nombreuses corrections de bugs, mais surtout une nouvelle fonctionnalité importante pour MooTools Core : la Délégation.

Cette version 1.4 devrait être pleinement compatible avec ses soeurs 1.2 et 1.3.

Les changements notables sont :

  • Déplacement de la Delegation dans le Core ;

  • Corrections de compatibilité pour ECMAScript 5. Parmi elles se trouvent : Function.bind, Array.map et String.Trim ;

  • Dépréciation de Element.setOpacity() et de Element.set('opacity'). Element.setStyle('opacity') est maintenant la seule manière correcte de jouer sur l'opacité (cela s'applique également pour les getters) ;

  • Désactivation de la couche 1.2 par défaut dans le constructeur ;

  • IE7 ne plante plus lors du double clonage d'un élément ;

  • La documentation sur les sélecteurs est de retour et est mise à jour pour la partie Slick (1.1.6) ;

  • Unification des changements de comportement sur les événements à travers les navigateurs ;

  • Renommage d'Event en DOMEvent afin d'éviter les conflits avec l'objet natif Event ;

  • ...


Evénement Delegation :

La délégation d'événements est une pratique courante où un écouteur d'événements est attaché à un élément parent afin de surveiller ses enfants plutôt que de fixer des événements à chaque élément enfant unique. Il est plus efficace pour le contenu dynamique ou pour les pages interactives avec beaucoup d'éléments DOM.

Exemple :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var myElement = $('myElement');
var request = new Request({
     // Autres options
     onSuccess: function(text){
          myElement.set('html', text); // No need to attach more click events.
     }
});
 
// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){
     event.preventDefault();
     request.send({
          url: target.get('href')
     });
});