活动

工作区中的每次更改都会触发一个事件。这些事件完整描述了每次更改的前后状态。

监听工作区中的事件

工作区具有 addChangeListener 和 removeChangeListener 方法，可用于监听事件流。一个例子是实时生成代码。另一个示例是最大块限制演示。 与往常一样，这两个示例都不关心触发事件是什么。它们只是查看工作区的当前状态。

更复杂的事件监听器会查看触发事件。以下示例会检测用户何时创建第一条评论，发出提醒，然后停止监听，以免触发更多提醒。

function onFirstComment(event) {
  if (event.type == Blockly.Events.BLOCK_CHANGE &&
      event.element == 'comment' &&
      !event.oldValue && event.newValue) {
    alert('Congratulations on creating your first comment!')
    workspace.removeChangeListener(onFirstComment);
  }
}
workspace.addChangeListener(onFirstComment);

为了监听弹出式菜单中发生的任何事件，可以将监听器添加到弹出式菜单的工作区。

var flyoutWorkspace = yourWorkspace.getFlyout().getWorkspace();
flyoutWorkspace.addChangeListener(onFirstComment);

监听来自块的事件

代码块可以具有在工作区发生任何更改时（包括与代码块无关的更改）调用的更改监听器函数。这些变量通常用于设置工作区外部的屏蔽警告文本或类似的用户通知。

通过使用函数调用 Block.setOnChange 来添加函数，如果您计划在所有平台上使用该函数，可以在初始化期间或通过 JSON 扩展来完成此操作。

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

您还可以直接在块上设置 onchange 属性：

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.onchange = function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    };
  }
}

系统会调用该函数，并传入更改事件。在该函数内，this 指的是块实例。

由于该函数会在任何更改时调用，因此如果使用该函数，开发者应确保监听器快速运行。还应注意工作区的更改，这些更改可能会级联或循环回到监听器。

如需查看示例，请参阅 controls_flow_statements、logic_compare 和 procedures_ifreturn 代码块。

请注意，可编辑字段有自己的事件监听器，用于输入验证和产生副作用。

事件类型

如需了解各个事件，请参阅参考文档。

演示

如需了解如何利用事件实现一些有趣的功能，您可以查看镜像演示。 此演示有两个 Blockly 工作区，它们通过事件保持同步。