将监听器添加到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;
        }
    }
});

因此，在说完所有可能使用包裹您的跨度的标签小部件后，您就很满意了；）

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

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

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