Добавить слушателя в SpanElement

Question

Я хочу добавить мышь над слушателем SpanElement, который я создал:

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

Я нашел в Google, как это сделать с помощью Label-wrapper, но я хочу сделать это без каких-либо упаковщиков. Является ли это возможным?

Спасибо.

Answer 1

Это возможно и без JSNI.

Итак, с вашей стихией:

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

добавить слушатель события непосредственно к элементу:

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
        }
    }
});

... и это выглядит ужасно;) как вы заметили, прослушиватель событий является "общим" для всех событий dom, задуманных этим элементом. поэтому, чтобы убедиться, что вы обрабатываете правильное событие, вы должны проверить тип события, когда вы поглощаете более одного типа события (на этот раз это накладные расходы - поскольку мы поглощаем только бит события CLICK). А что касается опускания -> это инициализирует элемент для участия в глобальной системе диспетчеризации событий gwt - события обрабатываются глобально, чтобы уменьшить количество замыканий, чтобы минимизировать утечки памяти в старых браузерах IE. на еще одну вещь. Вы можете установить только один прослушиватель событий на элемент - если вы установите новый, он перезапишет предыдущий. Итак, я предполагаю, что где-то позже вы захотите добавить прослушиватель MOUSEOVER к вашему диапазону, а не удалять уже добавленный прослушиватель CLICK, вы можете сделать что-то вроде этого:

//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);
        }
    }
});

или добавляя больше событий одновременно:

//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;
        }
    }
});

так что после того, как вы сказали, что все, что вы, вероятно, предпочитаете использовать виджет метки, обертывающий ваш диапазон;)

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

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

И последнее, не бойтесь виджетов, даже если вы хотите заниматься программированием в DOM - смотрите на них как на объект-оболочку узла jquery. они не тяжелые, но дают много энергии. Вы также можете обернуть виджеты непосредственно поверх существующих элементов DOM, не подключая их к "инфраструктуре панели" .