Ваадин и независимые события JavaScript

Приветствуются любые идеи или лучшее решение.

Вот как это сделает Бэтмен (сначала код, потом объяснение):

@SuppressWarnings("serial")
@Theme("so5")
@JavaScript("batman.js")
public class So5UI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = So5UI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        TextField field = new TextField();
        field.setId("batmanField");
        layout.addComponent(field);
        setContent(layout);
    }
}

И batman.js находится в том же пакете, что и класс So5UI.

alert('Script loaded');
var i = setInterval(batmanFunction, 300);

function batmanFunction()
{
    var element = document.getElementById("batmanField");
    if(element != null)
    {
        element.addEventListener("mouseover", batmanScript);
        clearInterval(i);
    }
}
function batmanScript()
{
    alert('I am batman');
}

Этот код работает, и каждый раз, когда вы наводите указатель мыши на текстовое поле, появляется предупреждение с текстом «Я Бэтмен». Хочу отметить несколько важных моментов:

1. Я добавил Id в это поле, чтобы мы могли найти его по getElementById()
2. Я запускаю batmanFunction, который через определенные промежутки времени регистрирует слушателя в поле. Это потому, что у нас нет контроля над временем выполнения создания JavaScript и DOM. Нам нужно зарегистрировать слушателя после создания DOM.
3. При работе с JavaScript и Vaadin не забудьте отключить кеширование js в своем браузере, потому что иногда это приводит к путанице («Этот сценарий должен работать», в то время как браузер по-прежнему использует кешированный сценарий). Вот как это сделать в Firefox.

Код был протестирован на Firefox 34, Vaadin 7.3, Tomcat 7.0. Если проблемы по-прежнему возникают, опишите подробнее.

РЕДАКТИРОВАТЬ: проверено, работает и при нажатии клавиши

РЕДАКТИРОВАТЬ2. Кажется, я понял, почему это может сработать для вас только «один раз». Поскольку Vaadin автоматически удаляет и добавляет div через Ajax, вы должны добавлять прослушиватель событий к компоненту каждый раз, когда он добавляется в DOM. В примере: если вы нажмете кнопку, которая удаляет поле из макета, а позже вы нажмете кнопку, которая добавляет то же поле в макет, событие больше не будет генерироваться. Вы должны найти эти места и еще раз выполнить данный сценарий. Вы можете проверить это с помощью следующего кода:

    @Override
    protected void init(VaadinRequest request) {
    VerticalLayout layout = new VerticalLayout();
    TextField field = new TextField();
    field.setId("batmanField");
    layout.addComponent(field);
    Button button = new Button("remove");
    button.addClickListener(new ClickListener()
    {

        @Override
        public void buttonClick(ClickEvent event)
        {
            layout.removeComponent(field);
        }
    });
    layout.addComponent(button);
    Button button2 = new Button("add");
    button2.addClickListener(new ClickListener()
    {

        @Override
        public void buttonClick(ClickEvent event)
        {
            layout.addComponent(field);
            com.vaadin.ui.JavaScript.eval("setInterval(batmanFunction, 300)");
        }
    });
    layout.addComponent(button2);
    setContent(layout);
}