事件

每當工作區發生變更，就會觸發事件。這些事件會完整說明每個變更的狀態前後狀態。

監聽工作區的事件

工作區有 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 會參照區塊例項。

由於系統會在任何變更時呼叫這個函式，因此開發人員應確保事件監聽器能快速執行。您也應留意工作區的變更可能會連鎖或迴圈回至 Listener。

請參閱 controls_flow_statements、logic_compare 和 procedures_ifreturn 區塊的範例。

請注意，可編輯欄位有自己的事件監聽器，可用於輸入驗證並造成副作用。

事件類型

如要瞭解個別事件，請參閱參考說明文件。

示範

如要瞭解事件的實用功能，請參閱鏡像示範。這個示範包含兩個 Blockly 工作區，並使用事件保持同步。