处理所有 DevExtreme 输入小部件的更改事件答案

【问题标题】：Handle change event for all DevExtreme input widgets处理所有 DevExtreme 输入小部件的更改事件
【发布时间】：2018-08-02 15:32:00
【问题描述】：

我正在寻找一种方法来跟踪表单字段是否已使用 DevExtreme 组件进行了修改。我想我可以用一个事件监听器绑定所有这些：

$('input').change(function () {
    console.log("Change detected.");
});

虽然这会触发普通的 <input> 元素，但 DevExtreme 组件（它们都使用底层隐藏的 <input> 元素）不会。这些组件有一个onValueChanged 字段，可以分配一个功能，但我们的想法是不必对每个控件都这样做。我有几十个dxTextBox、dxSelectBox、dxDateBox 等的表单。

【问题讨论】：

标签： javascript jquery devexpress devextreme

【解决方案1】：

DevExtreme 小部件提供defaultOptions(rule) 方法，允许为特定组件设置默认配置选项。

例如：

DevExpress.ui.dxTextBox.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        onValueChanged: function(e) {
           console.log("Change detected.");
        }
    }
});

【讨论】：

这是我最终使用的，必须为您使用的每种小部件类型完成，因此重复 dxNumberBox、dxDateBox 等。可以通过分配相同的代码来简化代码options 每个对象。

【解决方案2】：

使用 delegate() 方法附加的事件处理程序将适用于当前和未来元素（如脚本创建的新元素）。

我会推荐 jQuery Delegate 用于这种用法，即使它已被弃用，它也会有所帮助。

【讨论】：