将侦听器添加到 SpanElement [英] Add listener to SpanElement

问题描述

我想将鼠标悬停在监听器上添加到我创建的 SpanElement:

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

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

我在 google 中找到了如何使用 Label-wrapper 进行操作，但我想在没有任何包装的情况下进行操作.可能吗?

I found in google how to do it with Label-wrapper, but I wanna to do it without any wrappers. Is it possible?

谢谢.

推荐答案

没有 JSNI 也是可能的.

It is possible without JSNI too.

对于你的元素:

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

...它看起来真的很丑;)正如您所注意到的 - 事件侦听器对于此元素构思的所有 dom 事件是通用的".因此，为了确保您处理正确的事件，您应该在接收多个事件类型时检查事件类型(这次是开销 - 因为我们只接收了 CLICK 事件的位).至于下沉 -> 这会初始化元素以参与 gwt 全局 dom 事件调度系统 - 事件被全局处理以减少闭包的数量，从而最大限度地减少旧 IE 浏览器中的内存泄漏.还有一件事.您只能为每个元素设置一个事件侦听器 - 如果您设置一个新的事件侦听器，它将覆盖前一个.因此，我假设稍后您想将 MOUSEOVER 侦听器添加到您的跨度中，而不是清除所有已添加的 CLICK 侦听器，您可能会执行以下操作:

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

或一次添加更多事件:

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

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

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" .

这篇关于将侦听器添加到 SpanElement的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！