Events

Each MiniComp that fires events has defaultHandler as its last constructor parameter. The event this maps to is different for each component, but is designed to be the event you will most likely want to handle for that type of component. For example, the default event for a Button, RadioButton, and Checkbox is the click event. For numeric components - HSlider, VSlider, NumericStepper - it is the change event. And for text entry components - TextInput and TextArea - it is the input event.

Event Details

Each event dispatched (other than those dispatched by the Button component) contain a details property. This property will contain the updated “value” of the component. Specifically, details will contain the following value for each type of component:

• Checkbox: checked
• ColorPicker: color
• HSlider, NumericStepper, VSlider: value
• Radiobutton, TextInput, TextArea: text
• Dropdown: details will be an object containing the index and text of the selected item.

This makes getting the value from a component out of its event a tiny bit easier.

Without details:

new mc.TextInput(panel, 20, 20, "Hello", event => console.log(event.target.text));

With:

new mc.TextInput(panel, 20, 20, "Hello", event => console.log(event.details));

Other events

In addition to handling the default event in the constructor, you can add listeners for other events through standard addEventListener syntax.

Example:

const button = new Button(panel, 20, 20, "Click me");
button.addEventListener("click", () => console.log("I am a click handler that was added later"));
button.addEventListener("mouseover", () => console.log("mouse over"));
button.addEventListener("mouseout", () => console.log("mouse out"));