La classe Events di Mootools consente di aggiungere ad una classe semplici quanto utili capacità di gestione degli eventi. Una classe che implementa Events può infatti aggiungere, rimuovere e scatenare degli eventi (fire).

Il primo passo per utilizzare questa Class è implementarla:

var MyClass = new Class({ Implements: Events });

I metodi che vengono resi disponibili da questa istruzione sono:

// type stringa e fn handler
myClass.addEvent(type, fn);

// oggetto dove le chiavi sono i tipi e i valori sono function
myClass.addEvents(events);

// args è un object. Per passare più parametri args deve essere un array
myClass.fireEvent(type[, args[, delay]]);

myClass.removeEvent(type, fn);

// events opzionale, se non passato verranno rimossi tutti gli eventi
myClass.removeEvents([events]);

Un esempio (di dubbia utilità, ma semplice per iniziare) è questo:

var MyClass = new Class({
  Implements : Events,
  f : function() {
    console.log("[MyClass::f]");
    this.fireEvent("fcall");
  }
});

var x = new MyClass();
x.addEvent("fcall", function() {
  console.log("fcall handler called");
});

x.f();

L’output del programma è:

[MyClass::f]
fcall handler called

Nel dettaglio, la chiamata del metodo f di MyClass (da cui la prima riga di log) scatena l’handler definito nella addEvent (da cui la seconda loggata).

Vediamo infine un esempio un pò più sensato.
Creeremo una classe MessageBox, con un metodo per aggiungere un nuovo messaggio. L’aggiunta di un nuovo messaggio scatenerà un fire di un evento, che richiamerà un handler il quale avrà il compito di aggiungere il messaggio alla pagina HTML.
Si noti come questa implementazione consenta di sganciare la logica di aggiunta del messaggio alla MessageBox dalle varie azioni da intraprendere , lasciando la possibilità di aggiungere nuove azioni senza alterare la logica della classe.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
    <script>
      function norm(n) {
        return (n >= 0 && n < 10) ? "0"+n : ""+n;
      }
      function now() {
        var date = new Date();
        return norm(date.getDate()) + "/" + norm((date.getMonth()+1)) + "/" + date.getFullYear() + " - "
          +  norm(date.getHours()) + ":" + norm(date.getMinutes()) + ":" + norm(date.getSeconds());
      }      

      var MessageBox = new Class({
        Implements : Events, // Implemento 'Events'
        initialize : function() {
          this.list = [];
        },
        addMessageBox : function(text) {
          this.list.push(text);
          this.fireEvent("newmessage", [text]);
        }
      });

      var m = new MessageBox(); // istanza di 'MessageBox'

      // Gestore dei nuovi messaggi
      function appendMessageBox(text) {
        var box = document.getElementById("messageBox");
        var msgElem = document.createElement("p");
        var msgText = document.createTextNode(text);
        msgElem.appendChild(msgText);
        box.appendChild(msgElem);
      }
      //
      // Effettuo il bind di un handler sull'evento 'newmessage'
      //
      m.addEvent("newmessage", appendMessageBox);
      //
      //
      var i = 0;
      var periodical = null;
      function start() {
        if(periodical == null) {
          periodical = setInterval(function() {
            m.addMessageBox("["+now()+"] Sending message number " + (i++));
          }, 1000);
        }
      }
      function stop() {
        if(periodical != null) {
          clearInterval(periodical);
          periodical = null;
        }
      }

    </script>
    <body>
      <div>
        <button onclick="start()">Start</button>
        <button onclick="stop()">Stop</button>
      </div>
      <div id="messageBox"></div>
    </body>
  </head>
</html>

I tasti Start e Stop possono essere usati per avviare e stoppare la funzione periodica.