将监听器添加到SpanElement


问题内容

我想将鼠标悬停在我创建的SpanElement的侦听器上:

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

我在Google中找到了如何使用Label-wrapper做到这一点,但我想在没有任何包装的情况下做到这一点。可能吗?

谢谢。


问题答案:

也可以不使用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元素上,而无需将其附加到“面板基础结构”。