将侦听器添加到SpanElement

我想将鼠标hover在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浏览器中的内存泄漏。 还有一件事。 你可以为每个元素只设置一个事件监听器 – 如果你设置一个新的，它会覆盖前一个。 所以我假设somwehere后来你想要在你的跨度中添加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元素上，而无需将它们附加到“面板基础结构”。