HTML and CSS Reference
In-Depth Information
Listing 9.7
Implementation of
handleTabClick
function handleTabClick(event) {
var target = event.target
||
event.srcElement;
while (target && target.nodeType != 1) {
target = target.parentNode;
}
this.activateTab(target);
}
The handler grabs the element that triggered the event. This means the
target
property of the event object in most browsers, and
srcElement
in In-
ternet Explorer. To accommodate browsers that occasionally fire events directly on
text nodes, it makes sure it got an element node. Finally, it passes the originating
element to the
activateTab
method.
9.5.3 The
activateTab
Method
The
activateTab
method accepts an element as its only argument, and given
that its tag name is of the expected type, it activates it by adding a class name. The
method also deactivates the previously activated tab.
The reason we check the tag name is the event delegation. Any element inside
the containing element will cause a click event to fire, and the
tabTagName
prop-
erty allows us to configure which elements are considered “tabs.” Given a selector
engine, we could allow more fine-grained control of this feature by allowing arbi-
trary CSS selectors decide if an element is a tab. Another possibility is to expose
an
isTab(element)
method that could be overridden on specific instances to
provide custom behavior.
If and when the method changes the tabs state, it fires the
onTabChange
event, passing it the current and previous tabs. Listing 9.8 shows the entire test
case.
Listing 9.8
Test case covering the
activateTab
method
TestCase("TabbedControllerActivateTabTest", {
setUp: function () {
setUp.call(this);
this.controller = tabController.create(this.tabs);
this.links = this.tabs.getElementsByTagName("a");
this.lis = this.tabs.getElementsByTagName("li");
},
