如何监控隐藏输入元素的值？答案

【问题标题】：How can I monitor the value of a hidden input element?如何监控隐藏输入元素的值？
【发布时间】：2009-04-28 15:17:18
【问题描述】：

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

【问题讨论】：

标签： javascript html javascript-events

【解决方案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 彼此一无所知，只需要知道第三个对象。

【讨论】：