Events / Event handlers

Events in NestUI are what they sound like, but actually a little more - when a user clicks a form's submit button, a click event is created, which is caught by the button's event handler we create like this:

export class MyButtonComponent extends extend_as("MyButtonComponent").mix(Component).with() {
  constructor() {

    // This line is needed because "click" is a native browser-generated event.
    // For now ingore this, it will be explained in the next sections.
    this.native_events = ["click"];

    this.event_handlers.add({
      event:   "click",
      role:    "#self",
      handler: (self,event) => self.dom_element.style.display = "none"
    });
  }

In this example, when a button is clicked, we make it disappear. To add a handler, we use a special object this.event_handlers. This object has all the handlers for a particular Component object and has special methods to manage them. We've just used one of those methods called .add.

Note how on line 3 we've used a special role #string, which basically referes to the dom element associated with this component. To learn more about roles, please refer to the relevant section of this reference.

For now, let's just get to know some other methods that this.event_handler provides. Sometimes you might need to add add handlers for click events on different component parts. You can do this using the self.[part] notation, but you can also save yourself from typing "click" multiple times by using the this.event_handlers.addForEvent() method:

export class YesNoButtonComponent extends extend_as("YesNoButtonComponent").mix(Component).with() {
  constructor() {

    this.native_events = ["yes.click", "no.click"];

    this.event_handlers.addForEvent("click", {
      "self.yes": (self,event) => console.log("You answered Yes"),
      "self.no":  (self,event) => console.log("You answered No")
    });

  }
}

The first argument this method takes is the even name, as you can tell. The second agument is an object where keys are roles or references to component parts and values are handler functions. To provide you with some context, let's see what HTML may look like for this particular button:

So this is kind of a composite button with two parts. Each part - the yes and the no part - is assigned a separate handler. Depending on which part is clicked, we display a message in the console.

Another method provided by the events_handler object is called addForRole(). The syntax is similar: the first argument it takes is the role and the second argument is an object where keys are even names. So, same same, but different:

export class MyButtonComponent extends extend_as("MyButtonComponent").mix(Component).with() {
  constructor() {

    this.native_events = ["mouseup", "mousedown"];

    this.event_handlers.addForRole("#self", {
      "mousedown": (self,event) => console.log("Mousedown event"),
      "mouseup":  (self,event) => console.log("Mouseup event")
    });

  }
}

In this example, we're targeting two different events: mousedown and mouseup, but the event target is the same - the dom element associated with MyButtonComponent.

Sometimes you'd need to dynamically remove certain events to prevent handlers from firing. In that case use these methods:

  • event_handlers.remove({event: [event_name], role: [role_name] })
  • event_handlers.removeForEvent([event_name], [array of role names])
  • event_handlers.removeForRole([event_role], [array of event names])
There's also a useful method for when you need to check whether a particular handler for event/role pair exists:
  • event_handlers.hasHandlerFor({ role: [role_name], event: [event_name]})