事件

工作區的每次變更都會觸發事件。這些事件會完整說明每次變更前後的狀態。

監聽工作區的事件

工作區有 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 工作區，會使用事件保持同步。