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
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:
- HSlider, NumericStepper, VSlider:
- Radiobutton, TextInput, TextArea:
detailswill be an object containing the
textof the selected item.
This makes getting the value from a component out of its event a tiny bit easier.
new mc.TextInput(panel, 20, 20, "Hello", event => console.log(event.target.text));
new mc.TextInput(panel, 20, 20, "Hello", event => console.log(event.details));
In addition to handling the default event in the constructor, you can add listeners for other events through standard
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"));