Components allows you to perform operations on the page though an object model. There are two big reasons for having a model:

No selectors!

Most popular JavaScript libraries put a big emphasis on tools for querying the document with CSS selectors, so you can add listeners, effects etc. to individual elements. This can mean you application becomes a mass of queries without a clear strucutre.

Here's the gallery example from the jQuery demos:

<div id="loader">
    <h3>Click on an image to view it full size.</h3>
</div>
<ul id="imageOptions">
    <li><a href="#"><img src="img/1.jpg" alt="image" /></a></li> 
    <li><a href="#"><img src="img/2.jpg" alt="image" /></a></li> 
</ul>

$(function()
{
    $("#imageOptions a").click(function()
        {
        var imageSource = $(this).children("img").attr("src");
       
        $("#loader").addClass("loading");
        $("h3").remove();
          showImage(imageSource);
          return false;
        });
});

function showImage(src)
{
$("#loader img").fadeOut("slow")
                .remove();
var largeImage = new Image();
$(largeImage).attr("src", src)
             .load(function()
             	{
                $(largeImage).hide();
                $("#loader").removeClass("loading")
                            .append(largeImage);
                $(largeImage).fadeIn("slow");                      
                });                                                                       
}

Here it is in Components (using slightly altered markup):

<div id="gallery">
  <h3 class="focal">Click on an image to view it full size.</h3>

  <ul>
    <li><a href="#"><img class="thumb" src="img/1.jpg" alt="image" /></a></li> 
    <li><a href="#"><img class="thumb" src="img/2.jpg" alt="image" /></a></li> 
  </ul>
</div>

bind('gallery', {

  onLoadFocal: function() {
    this.clear('loading');
    this.focal.appear();
  },

  load: function(source) {
    this.apply('loading');
    this.focal.fade(function() {
      this.replace('<img class="focal" />').element.src = source;
    });
  }
});

bind('focal');

bind('thumb', {

  onClick: function() {
    this.gallery.load(this.element.src);
    return false;
  }
});

It uses more names, and less code. Plus it lets you know very clearly that there are three things with behavior.

It's unobtrusive ... and fast!

In the selectors approach, you run a separate query on the document each time. Obviously this might be a problem if you have a big page with lots of queries.

Having a model means the framework can do a single top-down traversal of the document and build all the objects and pointers you need in one go (and then update them as it goes along). The implementation for this is much simpler, and scales easily as you add more names and components.