Blue Lobster

Blue Lobster is a wrapper for mutation observers which enables a declarative method for binding DOM events.

The Blue Lobster library ties directly into the Mutation Observer API. The library leverages query selectors and the Mutation Observer API to enable declarative programming of DOM events.

Blue Lobster is instantiated on a given DOM node. The root node is then watched for any changes which occur to its contents.

The Create Event

The Blue Lobster library adds a "create" event for queryied objects. The create event will fire any time an element exists with the matching selector within the root node.

Example Usage

blue.listenFor("CSS3 selector", "event", function () { /*...*/ });

You can also bind multiple event listeners to multiple query selectors with the following syntax.

blue.listenFor({
  ".bioPhoto": {
    "create": function () { /*...*/ },
    "click": function () { /*...*/ }
  },
  "nav > ul > li": {
    "create": function () { /*...*/ }
  }

As an example let us create a butt load of buttons. (Watch live on Codepen.)

function moreButt () {
  var butt = document.createElement("button");
  butt.setAttribute("class", "butt");
  document.body.appendChild(butt);
}

blue = new BlueLobster("body");
  
blue.listenFor({
  ".butt": {
    "create": function () { this.innerHTML = "Click Me"; },
    "click": moreButt
  }
});

moreButt();

Why not see what other examples you can pull out of your... head?