MooTools 1.4.0

Written by Arian Stolwijk on 10 September 2011 – Posted under all

As of today a new version of MooTools is available. This includes MooTools Core and MooTools More. We've communicated a lot about changes for 2.0 but we also felt we had some good stuff that would benefit you directly which we wanted to add to the 1.x releases. This good stuff contains of course numerous bugfixes but mostly one important new feature for MooTools Core: Delegation. This 1.4 release should be fully backward compatible with the MooTools 1.2 and 1.3 series'.

So all changes for 1.4.0:

  • Move Delegation into Core.
  • ECMAScript 5 compatibility fixes. Among them are Function.bind, Array.map and String.trim
  • Deprecate Element.setOpacity() and Element.set('opacity'). Element.setStyle('opacity') is the only correct way now (the same applies for getters).
  • Disable the 1.2 compat layer by default in the builder.
  • Revamp Element.getProperty, Element.setProperty. Element.getProperty uses Slick.getAttribute now to share this code and save some bytes.
  • IE7 doesn't crash anymore when cloning an element twice.
  • The Selectors documentation is back and updated for Slick.
  • Update Slick to 1.1.6
  • Unified change event behavior across browsers.
  • Renamed Event to DOMEvent so it will not conflict with the native Event object.

Event Delegation

Event delegation is a common practice where an event listener is attached to a parent element to monitor its children rather than attach events to every single child element. It's more efficient for dynamic content or highly interactive pages with a lot of DOM elements.

Example

var myElement = $('myElement');
var request = new Request({
    // other 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')
    });
});

MooTools More

  • Removed Delegation. It's now in Core obviously.
  • Added the length validator to Form.Validator
  • Added the update method to HtmlTable which let you update rows
  • Added ARIA accessibility to Tips.

If you'd like to know what exactly changed, checkout the compare view.

We would like to thank everybody who has contributed code, documentation fixes and ideas to make this release possible. Among them are arieh, Delapouite, madisvain, adamnbowen, mooyah, GCheung55, amadeus, rasmusfl0e, jasonwaters, realityking, Nico-B, mcfedr, donatj, csuwldcat, ibolmo, cpojer, kamicane, timwienk, fakedarren, anutron, subtlegradient and myself arian.

Bugs

Thanks to GitHub contributing is easier than ever. It's very easy to fix them or to report them, especially since we moved to GitHub for our issues. Bugs can reported on the MooTools Core Bug Tracker and for MooTools More you can go to the More Bug Tracker.

If you have any questions, either about how to do something or about contributing you can ask, or something to share, just join the MooTools Mailing list or IRC (#mootools on freenode.net). We have an office hour each Tuesday but you can hang out there whenever you want.

Get it!

comments powered byDisqus