Events in XUL

Events may be assigned to elements by XUL attributes, by the DOM method addEventListener or directly by the event object.
The main attributes are as follows:
- Oncommand.
- Onclick.
- Onkeypress.
- Onselect.
See the full list of attributes of event handlers.

The addEventListener method

It can attach an event to a DOM object of the graphical user interface. The object is recognized by its ID and is accessed with the classical getElementByID method.

For example:

var x = document.GetElementById("bx");
x.addEventListener("command", myfunction, true);

The first parameter is the type of event. "Command" is an event, it is related to the oncommand attribute. Other events are "mousemove" (onmousemove), "click" (onclick), "close" (onclose) ...
The second parameter is the name of the function to be called when the event will occur. The third parameter indicates the mode capture or not. In capture mode, all type of events will be transmitted by the hierarchy of embedded graphical elements.

An example of using addEventListener is given in the chapter on menus in XUL.

The event object

The object is the event involved by an attribute of event. For example, the event attribute oncommand corresponds to a command, and it can be represented by the event object.

This object is implicit argument of functions called when an event occurs and that is given as the second parameter of the method addEventListener.

For example, the definition of the "myfunc" for an event of a mouse click. This function can be defined as follows:

function myfunction(event)
{
  alert("Coo: " + event.clientX + " " + event.clientY);
}
button.addEventListener("click", myfunction, true);

The function will display coordinates of the pixel on which one clicked.

Example

• Demo code.zip.