If you have written anything using events in YUI you know that you have a few ways to listen to a single event on a target, two of the most popular are the on() and after() methods. Essentially the on() method allows you to listen to the event before the after() listeners are given a chance to react to it and after() allows you to listen after the on() callbacks have had a chance to execute.

If you use on() to listen for the attribute change event you will be notified every time something attempts to set the value of that attribute. If you use after() your callback will only be executed if the value set was successful. What this means is that if something else was listening using on() decided to prevent the change event your after() callback would never fire.

A useful side effect of this is that the after() callback will not fire if the value being set is identical to the one currently in the attribute. This means that if you have a situation where an attribute may be set multiple times but you only care when it changes - by simply switching to listening via the after() method your callback will only execute when the values differ. Saving you the code in the callback to check the values and the function call which now is only called when required.

Click here to view this simple example on jsbin: Using after() event listeners to react to attribute value changes

YUI().use('node', 'base-build', function(Y) {

  var body = Y.one('body');
  var Foo = Y.Base.create('foo', Y.Base, [], {

    initializer: function() {
      this.on('barChange', function(e) {
        body.append('change attempted');                                  
      });

      this.after('barChange', function(e) {
        body.append('change successful');
      });

      body.append("---> Setting bar to 'cupcake'");
      this.set('bar', 'cupcake');

      body.append("---> Setting bar to 'cupcake' again");
      this.set('bar', 'cupcake');

      body.append("---> Setting bar to 'pie'");
      this.set('bar', 'pie');
    }

  }, {

    ATTRS: {

      bar: {
        value: 'baz'
      }

    }

  });
  new Foo();
});

Thanks for reading, and if you have any questions feel free to comment below, mention me @fromanegg or pop into #yui on irc.freenode.net