活动

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

监听来自工作区的事件

工作区具有 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 工作区，它们使用事件保持同步。