SurveyJS 库中 SurveyModel 的 onQuestionCreated 事件使用指南

SurveyJS 是一个强大的表单构建库，它允许开发者通过 JSON 配置来创建复杂的调查问卷。在使用过程中，开发者可能会遇到需要监听问卷问题创建事件的需求，特别是在预览模式下。本文将深入探讨如何在 SurveyJS 中正确使用 onQuestionCreated 事件。

事件监听的基本原理

SurveyJS 提供了两个重要的事件监听函数：

• onQuestionAdded - 当问题被添加到页面时触发
• onQuestionCreated - 当问题被创建时触发

这些事件对于需要在问题创建或添加时执行自定义逻辑的场景非常有用，比如：

• 动态修改问题配置
• 添加自定义验证
• 实现特殊的交互逻辑

常见问题场景

许多开发者会遇到这样的困惑：为什么在直接通过 JSON 构造 SurveyModel 时，这些事件监听器不工作？这是因为事件的订阅时机问题。

不推荐的方式

const json = {
   pages: [
      // 问卷配置
   ]
};
const survey = new Model(json);

推荐的方式

const survey = new Model();
survey.fromJSON(json);

在 Creator 预览模式下的特殊处理

当使用 Survey Creator（问卷设计器）时，预览标签页中的问卷实例创建过程有其特殊性。开发者需要了解正确的监听方式：

creator.onSurveyInstanceSetupHandlers.add((sender, options) => {
    if (options.area === "preview-tab") {
      options.survey.onQuestionCreated.add((sender, options) => {
        console.log("问题已创建:", options.question.name);
        // 在这里可以添加自定义逻辑
      });
    }
});

实际应用示例

假设我们需要为所有单选按钮组问题添加特殊样式：

creator.onSurveyInstanceSetupHandlers.add((sender, options) => {
    if (options.area === "preview-tab") {
      options.survey.onQuestionCreated.add((sender, options) => {
        if (options.question.getType() === "radiogroup") {
          // 添加自定义CSS类
          options.question.cssClasses.root = "custom-radio-group";
          
          // 修改默认选项
          options.question.choices = ["选项1", "选项2", "选项3"];
        }
      });
    }
});

最佳实践建议

1. 事件订阅时机：确保在问卷实例完全初始化后再订阅事件
2. 性能考虑：避免在事件处理函数中执行耗时操作
3. 条件判断：始终检查问题类型后再执行特定逻辑
4. 内存管理：在不需要时及时移除事件监听器

通过正确理解和使用 SurveyJS 的事件系统，开发者可以实现高度定制化的问卷逻辑，满足各种复杂的业务需求。