javascript - 如何监控隐藏输入元素的值？

Question

我有一个 SELECT 元素，它会在每次单击 OPTION 时通过 JavaScript 将其值添加到隐藏的 INPUT(以及每个选择的可视化表示)，我希望能够监视另一个 JavaScript 函数的更改。为了模块化，我无法将第二个功能集成到第一个功能中。我也宁愿不轮询隐藏的输入值以避免黑客攻击。目前，我在包含 SELECT 和隐藏 INPUT 的 DIV 上使用 onclick 事件，但这也很老套。您知道一种方法来监视隐藏的 INPUT 元素的更改吗？

Answer 1

所以，你有:

• 函数 A，更新隐藏的 INPUT。
• 函数 B，应在更新 INPUT 时调用。

为什么不创建一个您自己的“事件”，让函数 A 在完成工作时调用/调度？

我相信大多数 Javascript 框架都非常容易支持自定义事件的概念，但它只是一系列函数调用。

例如，创建一些对象 D，它表示单个事件的调度程序。是的，这很愚蠢，但我试图让这个概念保持简单。这个对象 D，持有一个函数列表，这些函数已经为其事件“注册”，并且当事件被调度时，它会调用这些函数。

类似于:

var d = (function() {
    var funcs = [];

    function fire() {
        for (var i=0; i<funcs.length; ++i) {
          funcs[i].call();
        }
    }

    function register(newfunc) {
        funcs.push(newfunc);
    }    

    return {
        fire: fire,
        register: register
    };
})();

您只剩下两件事要做 - 让函数 A 触发事件:

function A() {

    // do stuff to update the INPUT

    d.fire();
}

还有，onload，“注册”事件发生时要调用的函数 B:

d.register(B);

这种方法维护了模块分离原则(或任何它的名称)，因为 A 和 B 彼此一无所知，只需要知道第三个对象。