Dealing with javascript events applicable only for certain content

Question

I'm having trouble understanding conceptually what I should do while trying to make my first large javascript web application.

Depending on which tab a user has selected, I show different content inside a container. The content is more than just text and uses different javascript functions and events. I am using the Yahoo! UI Library's "TabView" implementation, but the way that this issue should be handled would probably apply to other Tab approaches.

What I was thinking of doing was basically the following:

Create separate modules for each tab (e.g. MYAPP.modules.tabCalendar and MYAPP.modules.tabJournal). When the user clicks on a different tab (or navigates with browser buttons to a previous tab state), I could call MYAPP.modules[oldModule].disable() and MYAPP.modules[newModules].enable(). These functions would subscribe or unsubscribe their custom events (for example, a general click handler attached to the container).

An alternate approach to dealing with events might be to have a single global click handler. If the click is inside the container, then determine which tab is currently selected and send the click event to MYAPP.modules[currentTab].onClick().

Or, the global click handler could fire a Custom Event to which the modules have subscribed since page load, and each module's onClick events will run and determine whether or not they should do anything.

There seem to be a lot of options, but I've been having trouble finding resources that talk about the best ways to do things like this. Am I on the right path? How should I handle this?

Answer 1

I'm a bit fuzzy on the problem.

1. Yes, you should modularize your code.
2. Have each module setup event handlers on the elements in their respective container.

That's it. YUI TabView handles the tab switching so you don't need to enable/disable anything.

Answer 2

Use the events already built into TabView to queue your JS to do things.

http://developer.yahoo.com/yui/tabview/#handlingevents

For tab changes you'll be told the previous/next tabs selected and such which should be more than enough for your JS to figure out what it should do. If you want to write a translation layer that'll look at the events and do something based on it that's fine but it's not strictly necessary.