Add listener to SpanElement

Question

I wanna add mouse over listener to SpanElement, which i created by:

SpanElement span = Document.get().createSpanElement();
span.setInnerText(\"my text\");
         


        

Answer 1

It is possible without JSNI too.

So with your element:

SpanElement span = Document.get().createSpanElement();
span.setInnerText("my text");

to add event listener directly to element:

Event.sinkEvents(span, Event.ONCLICK);
Event.setEventListener(span, new EventListener() {

    @Override
    public void onBrowserEvent(Event event) {
        if(Event.ONCLICK == event.getTypeInt()) {
            //do your on click action
        }
    }
});

...and it looks really ugly ;) as you notice - the event listener is "common" for all dom events conceived by this element. so to make sure you handle the proper event you should check event type when you sink more than one Event type (this time it's overhead - as we sinked only CLICK event's bit). And as to sinking -> this initializes the element to take part in gwt global dom event dispatching system - the event are handled globaly to decrease number of closures so minimize memory leaks in older IE browsers. on one more thing. you can set only one event listener per element - if you set a new one it overwrites the previous one. So i assuming somwehere later you want to add MOUSEOVER listener to your span and not to clear off allready added CLICK listener you might do something like this:

//add mouseover event bit to existing sunk event bits
Event.sinkEvents(span, Event.getEventsSunk(span) | Event.ONMOUSEOVER);
final EventListener oldListener = Event.getEventListener(span);
Event.setEventListener(span, new EventListener() {

    @Override
    public void onBrowserEvent(Event event) {

        if(Event.ONMOUSEOVER == event.getTypeInt()) {
            //your mouseover action
        }

        if(oldListener != null) {
            oldListener.onBrowserEvent(event);
        }
    }
});

or adding more events at once:

//add mouseover event bit to existing sunk event bits
Event.sinkEvents(span, Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT);
Event.setEventListener(span, new EventListener() {

    @Override
    public void onBrowserEvent(Event event) {

        switch(event.getTypeInt()) {
            case Event.ONCLICK:
                break;
            case Event.ONMOUSEOVER:
                break;
            case Event.ONMOUSEOUT:
                break;
        }
    }
});

so after saying that all you probably aprecciate using a label widget wrapping your span ;)

Label.wrap(span).addClickHandler(new ClickHandler() {

    @Override
    public void onClick(ClickEvent event) {
        //do your on click action
    }
});

And last thing do not be afraid of widget even if you want to do DOM programming- look at them as something like jquery node wrapper object. they're not heavy but give much power. you can also wrap widgets directly over existing DOM elements without attaching them to "panel infrastructure" .