Elemento
GitHubSamples
  • Get started
  • Builder API
  • Event Handlers
  • Typesafe CSS Selectors
  • Custom Elements
  • Attach and Detach Handlers
  • Iterators / Iterables / Streams
  • Manipulate the DOM Tree
  • Router
  • Flow
  • Logger
  • SVG
  • MathML
  • Samples
Powered by GitBook
On this page
Edit on GitHub

Event Handlers

PreviousBuilder APINextTypesafe CSS Selectors

Last updated 6 months ago

Elemento provides methods to easily register event handlers. There are for most of the known event types. You can either add event handlers when building the element hierarchy:

import static org.jboss.elemento.Elements.*;
import static org.jboss.elemento.EventType.*;
import static org.jboss.elemento.InputType.checkbox;
import static org.jboss.elemento.InputType.text;

HTMLLIElement listItem = li()
        .add(div().css("view")
                .add(input(checkbox)
                        .css("toggle")
                        .on(change, event -> toggle()))
                .add(label()
                        .text("Taste Elemento")
                        .on(dblclick, event -> edit()))
                .add(button()
                        .css("destroy")
                        .on(click, event -> destroy())))
        .add(input(text)
                .css("edit")
                .on(keydown, this::keyDown)
                .on(blur, event -> blur()))
        .element();

or register them later using EventType.bind():

import org.gwtproject.event.shared.HandlerRegistration;

import static elemental2.dom.DomGlobal.alert;
import static org.jboss.elemento.EventType.bind;
import static org.jboss.elemento.EventType.click;

HandlerRegistration handler = bind(listItem, click, event -> alert("Clicked"));

The latter approach returns org.gwtproject.event.shared.HandlerRegistration which you can use to remove the handler again.

import elemental2.dom.KeyboardEvent;

import static org.jboss.elemento.Key.Escape;
import static org.jboss.elemento.Key.Enter;

void keyDown(KeyboardEvent event) {
    if (Escape.match(event)) {
        ...
    } else if (Enter.match(event)) {
        ...
    }
}

To make it easier to work with keyboard events, Elemento provides an with the most common keyboard codes:

constants
enum