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

问题描述

  SpanElement span = Document.get（）。我想将鼠标放在侦听器上，并将其添加到我创建的SpanElement中。 createSpanElement（）; 
 span.setInnerText（my text）; 
  

我在google中找到了如何使用Label-wrapper做到这一点，但我想不做任何操作包装。是否有可能？

谢谢。

解决方案

没有JSNI。

因此，您的元素：

  SpanElement跨度= Document.get（）。createSpanElement（）; 
 span.setInnerText（my text）; 
  

将事件侦听器直接添加到元素：

  Event.sinkEvents（span，Event.ONCLICK）; 
 Event.setEventListener（span，new EventListener（）{
 $ b @Override 
 public void onBrowserEvent（Event event）{
 if（Event.ONCLICK == event。 getTypeInt（））{
 //做点击动作
} 
} 
}）; 
  

...并且它看起来真的很丑陋;）
正如您注意到的那样 - 事件侦听器对于这个元素构想的所有dom事件是共同的。因此为了确保处理正确的事件，您应该检查事件类型（当您沉没多个事件类型时（这次是开销 - 因为我们只沉没了CLICK事件的位）。至于沉没 - >这初始化参与gwt全球dom事件调度系统的元素 - 事件是全局处理的，以减少关闭的次数，以便尽量减少旧IE浏览器的内存泄漏。
还有一件事。每个元素只能设置一个事件监听器 - 如果您设置了新的监听器，它会覆盖前一个。所以我假设somwehere后来你想添加MOUSEOVER监听器到你的范围内，而不是清除所有已添加的CLICK监听器，你可能会这样做：

  //将mouseover事件位添加到现有的沉没事件位
 Event.sinkEvents（span，Event.getEventsSunk（span）| Event.ONMOUSEOVER）; 
 final EventListener oldListener = Event.getEventListener（span）; 
 Event.setEventListener（span，new EventListener（）{
 $ b @Override 
 public void onBrowserEvent（Event event）{
 
 if（Event.ONMOUSEOVER == event.getTypeInt（））{
 //您的鼠标悬停动作
} 
 
 if（oldListener！= null）{
 oldListener.onBrowserEvent（event）; 
} 
} 
}）; 
  

或一次性添加更多活动：

<$
Event.sinkEvents（span，Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT）; p $ p $ //将鼠标悬停事件位添加到现有沉没事件位。
Event.setEventListener（span，new EventListener（）{
$ b @Override
public void onBrowserEvent（Event event）{

switch（event.getTypeInt （））{
case Event.ONCLICK：
break;
case Event.ONMOUSEOVER：
break;
case Event.ONMOUSEOUT：
break;
}
}
}）;


所以你可能会用一个标签小部件来包装你的span;）

pre $ Label.wrap（span）.addClickHandler（new ClickHandler（）{

@Override
public void onClick（ClickEvent事件）{
//做点击动作
}
}）;


即使您想要执行DOM编程，最后一件事也不要害怕小部件 - 看看它们就像jquery节点包装器对象一样。他们并不沉重，但给了很多权力。
，您还可以直接在现有的DOM元素上包装小部件，而无需将它们附加到面板基础结构。

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

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

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

Thank you.

解决方案

It is possible without JSNI too.

So with your element:

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

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

or adding more events at once:

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

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屋！