java - 将监听器添加到 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 全局 dom 事件调度系统 - 全局处理事件以减少闭包数量，从而最大限度地减少旧版 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;
        }
    }
});

所以说完所有你可能都喜欢使用包装你的 span 的标签小部件 ;)

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

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

最后一点，即使您想进行 DOM 编程，也不要害怕小部件 - 将它们视为类似 jquery 节点包装器对象的东西。它们并不重，但能提供很大的力量。您还可以将小部件直接包装在现有的 DOM 元素上，而无需将它们附加到“面板基础设施”。