Vaadin和独立的JavaScript事件

Question

我使用ProgressBar和PasswordField开发强度密码指示器。 问题是我无法使用onkeydown或本机javascript的addEventListener之类的jQuery事件处理程序，因为它只能运行一次，然后Vaadin会以某种方式覆盖它。 我不想永久性地完全删除它，它仅适用于jQuery对象。 任何想法或更好的解决方案都将受到欢迎。

Answer 1

任何想法或更好的解决方案都将受到欢迎。

蝙蝠侠就是这样做的（先编码，后解释）：

@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上进行了测试。 如果您仍然遇到麻烦，请提供更多详细信息。

编辑：经测试，也适用于keydown

EDIT2我相信我已经弄清楚了为什么它可能仅对您“起作用”一次。 由于Vaadin会通过Ajax自动删除和添加div，因此每次将事件侦听器添加到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);
}