JavaScript/Notes/IBD

From Noisebridge
Jump to navigation Jump to search

Interface Based Design

Using a common interface, different Event adapters are designed to handle different types of event registration:

  1. Event handler properties
  2. DOM event registration mechanisms

<source lang="javascript"> get(src, sEvent); // Gets an event publisher. addCallback(src, sEvent, callback); removeCallback(o, type, cb[, useCapture); </source>

Event Handler Properties

Each event is a property name. The value is a function or null. The pattern works equally well for custom events on user-defined objects and DOM events.

DOM Elements <source lang="javascript"> el["onclick"] = function(ev) {

 alert(this);

};</source>

Custom Objects and Events <source lang="javascript"> userPicker.onuserselected= function(ev) {

 console.log(ev.user + " chosen.");

}; </source>

Event Listener Interface

<source lang="javascript"> el.addEventListener("click", function(ev) {

 alert("clicked");

}, false); </source>

Custom objects <source lang="javascript"> userPicker.addCallback("onuserselected", function(ev) {

 console.log(ev.user + " chosen.");

}); </source>