Detect tabbox tab change in XUL

Question

What's the best way to detect switching between tabs inside a tabbox? In particular, I need to detect when a certain tab is opened, and when the user leaves it (switches to another tab).

I'm using onclick now but that feels hackish.

Answer 1

Listen for the select event on the tabpanels element:

var panels = document.getElementById("tabpanels"); // whatever your ID is
panels.addEventListener("select", function(e) {
    var el = e.target;
    alert(e.target.tagName); // tabpanels
    alert(e.target.selectedPanel) // [object XULElement] (the selected tab)
}, false);

Answer 2

I admit it could be in a more prominent place near the top of the page, but the documentation says:

selectedPanel

Type: element

Holds a reference to the currently selected panel within a element. Assigning a value to this > property will modify the selected panel. A select event will be sent when the selected panel is changed.

It's not totally clear whether the event target is the tabbox or the individual panel, so you may have to experiment a little bit.