javascript - JS 事件函数仅被触发一次

Question

我正在尝试为 Handlebars 模板创建一个简单的表单验证器。因此，我在模糊上使用了 addEventListener 来验证输入，但该事件仅被触发一次。我这样做对吗？或者有更好的方法/推荐的良好实践吗？

这是 JSFiddle:http://jsfiddle.net/jj4fsn9j/

function addInputValidation(el, event) {
    el.addEventListener(event, function() {
        var data = {
            invalid: {}
        };
        data.invalid[el.id] = false;
        data[el.id] = el.value;

        console.log(el.value);
        if (typeof el.value === 'undefined' || el.value === '') {
            data.invalid[el.id] = true;
        }

        console.log(data);
        updateTemplate(data);
    });

有人可以帮我解决这个问题吗？

Answer 1

与每个 onblur -您调用的事件updateTemplate(data)这又导致这一行:

document.getElementById('body').innerHTML = html;

这意味着每次触发该事件时，您都会用新内容覆盖整个文档。因此，所有事件处理程序都会丢失。

参见your updated fiddle其中我 - 仅作为示例 - 已删除 updateTemplate()功能。您会注意到，此处事件处理程序会根据需要相应地触发多次。

无论如何，每次触发事件时都覆盖整个文档都不是一个好习惯。要么只覆盖需要覆盖的部分，或者 - 如果您需要坚持覆盖整个文档 - 请确保运行 addInputValidations()更改innerHTML后再次 body 的。但我想再次强调，一遍又一遍地覆盖你 body 的内容是不好的做法。