HTML and CSS Reference
In-Depth Information
Note that we're using event delegation here, by registering a single event han-
dler for the whole list element and then passing along the event object to the event
handler.
Listing 9.6
Implementation of
create
(function () {
var dom = tddjs.dom;
function create(element) {
if (!element
||
typeof element.className != "string") {
throw new TypeError("element is not an element");
}
dom.addClassName(element, "js-tab-controller");
var tabs = Object.create(this);
element.onclick = function (event) {
tabs.handleTabClick(event
||
||
window.event
{});
};
element = null;
return tabs;
}
function handleTabClick(event) {}
tddjs.namespace("ui").tabController = {
create: create,
handleTabClick: handleTabClick
};
}());
The event is handled by the tab controller's
handleTabClick
method. Be-
cause we will discuss working around the cross-browser quirks of event handling
in Chapter 10,
Feature Detection,
we will skip its test case for now. The
tabCon-
troller
test case should concern itself with the behavior of tabs, not differing
implementations of event handling. Such tests belong in a test case dedicated to an
event interface whose purpose is to smooth over browser differences. In many cases
this role is filled by a third party JavaScript library, but there is nothing stopping us
from keeping our own set of tools for those cases in which we don't need everything
that comes with a library. Listing 9.7 shows the resulting method.
