Adding a click handler for an html element?

Answer 1

The problem using wrap() is that if the parent element is already a widget, the wrapping is not allowed. You can still do it and will work, but if you run the application in development mode the assertion will fail, stopping the application.

The right (but tedious and in my opinion incomplete) way is something like

Element elem = DOM.getElementById(“billing-component”);
DOM.sinkEvents(elem, Event.ONCLICK | Event.ONMOUSEOUT | Event.ONMOUSEOVER);
DOM.setEventListener(elem, new EventListener() {
    @Override
    public void onBrowserEvent(Event event) {
        if (Event.ONCLICK == event.getTypeInt()) {
            …
        }
    }
});

I know doesn't look nice, and actually it isn't because you can only attach a single listener to the element and have to check for the event type.

Answer 2

I haven't tested this, but the general idea is right, and easy enough to extend for more than one target element. You might like to store the elements returned by DOM.getElementById() beforehand to keep things fast. Bear in mind that onPreviewNativeEvent() will be called for every user event, so keep it light.

Event.addNativePreviewHandler(new NativePreviewHandler() {
    public void onPreviewNativeEvent(NativePreviewEvent event) {
        if (Event.as(event).getTypeInt() == Event.ONCLICK &&
            DOM.isOrHasChild(DOM.getElementById("A"), Element.as(event.getEventTarget()))) {
            // Element 'A' was clicked.
        }
    }
}