HTML and CSS Reference
In-Depth Information
Listing 9.7 Implementation of handleTabClick
function handleTabClick(event) {
var target =
while (target && target.nodeType != 1) {
target = target.parentNode;
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
Listing 9.8 Test case covering the activateTab method
TestCase("TabbedControllerActivateTabTest", {
setUp: function () {;
this.controller = tabController.create(this.tabs);
this.links = this.tabs.getElementsByTagName("a");
this.lis = this.tabs.getElementsByTagName("li");
Search WWH ::

Custom Search