OOUI/OOjs primer

The OOjs library provides some commonly used functionality to OOjs UI, most notably an API for handling events. If you are not familiar with OOjs, you may wish to take a moment to familiarize yourself with EventEmitter, as it is a convenient and powerful tool that will often be used in examples.

EventEmitter allows event handlers to be connected to an object, called when events occur, and disconnected when no longer needed. Events are tied to their context. For example, when a toggle button changes state, the event is not simply ‘change,’ but ‘change’ and the value of the toggle button’s state ( ‘on’ or ‘off’).

The most basic way to connect and disconnect an event handler is with the EventEmitter’s on and off methods. In the following example, the on method is used to connect an ‘onChange’ event handler to a toggle button, which is defined in the example as well.

Often, the connect and disconnect methods are used to connect and disconnect multiple event handlers to objects. The following example illustrates these methods.

Note: A convention of OOjs is that any method that begins with ‘on’ (e.g., onClick and onKeyPress) is private, except for the on method itself.

For more details about EventEmitter, please see https://www.mediawiki.org/wiki/OOjs/Events.