# bricksコントロールのイベント処理
bricksコントロールのイベント処理は、コントロール記述データの`binds`プロパティにイベント処理データを追加することで実現されます。
## bricksがサポートするイベント処理タイプ
* urlwidget
* method
* script
* registerfunction
* event
さらに、以下の複合型もサポートしています。
* actions
イベント処理の定義では、「actiontype」属性を使用してイベント処理のタイプを指定します。
## イベント処理定義のデータ要素
すべてのイベント処理タイプに共通するデータ要素：
### wid
イベント発生元のコントロールID。「self」は`binds`属性を持つコントロール自身を指します。IDには「a.b.c」形式が使用可能で、現在位置からIDがaのコントロールを探し、次にaからIDがbのコントロールを探し、さらにbからIDがcのコントロールを探すという意味になります。
#### 特殊な約束されたコントロールID
* self -- `binds`属性を持つコントロール自身
* root -- ``直下の最初のコントロール
* body/app -- bricks.app
* -x -- 現在位置から上位（祖先）にIDがxのコントロールを探す
### event
コントロールのHTMLネイティブイベント、またはコントロールクラス内で定義されたイベント、あるいはeventイベント処理タイプの`dispatch_event`属性で定義されたイベントをサポートします。
### actiontype
イベント処理のタイプを指定します。「urlwidget」「method」「script」「registerfunction」「event」、または複合型の「actions」をサポートしています。
### conform
オブジェクト型。イベントバインディングの実行前にユーザー確認を必要とする場合に、`options`を含むことで確認ダイアログを表示できます。
### datawidget
イベントに動的パラメータを追加する場合、その動的パラメータを取得するコントロールのIDを指定します。`datawidget`のルールについては[コントロールID](widgetid.md)をご覧ください。
動的パラメータを使用しない場合は、`datawidget`、`datamethod`、`datascript`、`dataparams`の各属性を設定しなくても構いません。
### datamethod
動的パラメータを取得するためのメソッド
### datascript
動的パラメータを取得するためのスクリプト
### dataparams
動的パラメータ取得時に渡すパラメータ（オプション）。オブジェクト型で、キーと値のペアで指定します。
### popup_options
`target`が「Popup」または「PopupWindow」の場合、PopupやPopupWindowの表示パラメータを定義します。
#### dismiss_events
文字列の配列。各文字列はPopupまたはPopupWindow内の子コントロールのイベントを表し、これらのイベントが発生したときにPopupまたはPopupWindowを閉じます。
#### eventpos
PopupまたはPopupWindowをマウスの位置に移動させます。
### 動的パラメータの取得について
バインディングタスクがリアルタイムデータをパラメータとして取得するには、以下の属性を指定する必要があります：
* datawidget：文字列またはコントロール型。リアルタイムデータを取得するコントロール。
* datamethod：文字列型。コントロールのメソッド。`params`を引数として呼び出し、リアルタイムデータを取得する。
* datascript：文字列型。JavaScriptスクリプト。`return`を使ってデータを返す。
* dataparams：パラメータ（オプション）
`datamethod`は`datascript`よりも優先され、`datawidget`コントロールから`datamethod`を通じてデータを取得します。
### target
イベント処理の対象となるコントロール。以下の形式の`target`定義をサポートします：
* 対象コントロールのインスタンスオブジェクト
* 文字列で、「Popup」と等しい場合
* 文字列で、「PopupWindow」と等しい場合
* その他（コントロールオブジェクトのID）
`actiontype`が「urlwidget」の場合は、`target`はコンテナコントロールである必要があります。生成されたコントロールは`target`で指定されたオブジェクトに挿入または置き換えられます。それ以外の`actiontype`の場合は、このオブジェクト上でメソッド、スクリプト、関数、イベントを実行します。
### conform
イベント処理をユーザーの確認後に実行したい場合、イベント処理に`conform`属性を指定できます。イベント発生時に確認ウィンドウが表示され、ユーザーが確認した場合のみ処理が行われ、キャンセルされた場合は処理されません。
異なるイベント処理方法には一部異なる属性があります。以下にそれぞれ説明します。
---
### urlwidget メソッド
urlwidgetイベント処理は、バックエンドからコントロール記述ファイルを取得し、動的にbricksコントロールを生成して、イベントの`target`で指定されたコントロール内に（挿入・置換・追加）するものです。
urlwidgetバインディングには`options`属性と`mode`属性が必要です。以下を含みます：
* url：文字列型。記述データを取得するURL
* method：文字列型。URL呼び出しのメソッド。省略時は「GET」
* params：オブジェクト型。呼び出し時のパラメータ。`datawidget`から取得したデータがこの属性に影響します。
生成されたコントロールは`target`コントロールに追加されます。
**例**
```json
{
"widgettype":"VBox",
"options":{
"width":"100%",
"height":"100%"
},
"subwidgets":[
{
"widgettype":"HBox",
"options":{
"height":"40px"
},
"subwidgets":[
{
"id":"replace",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"replace mode"
}
},
{
"id":"insert",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"insert mode"
}
},
{
"id":"append",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"append mode"
}
}
]
},
{
"id":"main",
"widgettype":"Filler"
}
],
"binds":[
{
"wid":"replace",
"event":"click",
"actiontype":"urlwidget",
"target":"main",
"options":{
"url":"{{entire_url('replace_text.ui')}}",
"params":{
"text":"Insert before"
}
}
},
{
"wid":"insert",
"event":"click",
"actiontype":"urlwidget",
"target":"main",
"options":{
"url":"{{entire_url('insert_text.ui')}}",
"params":{
"text":"Insert before"
}
},
"mode":"insert"
},
{
"wid":"append",
"event":"click",
"actiontype":"urlwidget",
"target":"main",
"options":{
"url":"{{entire_url('subtext.ui')}}",
"params":{
"text":"Append After"
}
},
"mode":"append"
}
]
}
```
上記の例では、縦方向に配置するコンテナ（VBox）を作成し、その中に横方向のコンテナ（HBox）とフィラー（Filler）を配置しています。HBox内には「replace」「insert」「append」というIDを持つ3つのボタンを配置しています。メインコントロール（VBox）の`binds`では、3つのボタンの`click`イベントに対応する3つのイベント処理を定義しており、`target`コントロールへの子コントロール挿入モード（全置換、既存の前へ挿入、既存の後ろに追加）をそれぞれ示しています。
---
### method メソッド
`target`パラメータと`method`パラメータを指定する必要があります。
* target：文字列またはコントロール型。文字列の場合は`getWidgetById`関数でコントロールインスタンスを取得します。
* method：文字列。`target`インスタンスのメソッド名。
* params：メソッドに渡すパラメータ。
このバインディングにより、イベントが`target`コントロールの特定メソッドにバインドされ、`params`でパラメータを渡します。
**例**
```json
{
"widgettype":"VBox",
"options":{
"width":"100%",
"height":"100%"
},
"subwidgets":[
{
"widgettype":"HBox",
"options":{
"height":"40px"
},
"subwidgets":[
{
"id":"changetext",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Change text"
}
},
{
"id":"smaller",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Small size"
}
},
{
"id":"larger",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"larger size"
}
}
]
},
{
"widgettype":"Filler",
"options":{},
"subwidgets":[
{
"id":"text_1",
"widgettype":"Text",
"options":{
"dynsize":true,
"text":"original text"
}
}
]
}
],
"binds":[
{
"wid":"changetext",
"event":"click",
"actiontype":"method",
"target":"text_1",
"params":"new text",
"method":"set_text"
},
{
"wid":"smaller",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_smaller"
},
{
"wid":"larger",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_bigger"
}
]
}
```
上記の例では、3つのボタンがそれぞれ`app`の`textsize_smaller()`と`textsize_bigger()`を呼び出して、bricks内の文字サイズを変更し、`text_1`コントロールの表示サイズに影響を与えています。
---
### script メソッド
スクリプトにイベントをバインドします。以下の属性をサポートします。
* script：文字列。スクリプト本体。
* params：オブジェクト型。スクリプトは`params`変数を使ってパラメータを取得できます。
スクリプト内で使用可能な変数：
* this：イベント処理における`target`に対応するコントロールインスタンス
* params：パラメータオブジェクト。`datawidget`で取得したデータは`params`に追加されます。
**例**
```json
{
"id":"insert",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"click me"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"self",
"script":"console.log(this, params, event);"
}
]
}
```
上記の例では、「script」イベント処理を使ってボタンの`click`イベントを処理し、クリック後にコンソールにイベントパラメータを出力しています。
---
### registerfunction メソッド
イベントを登録済み関数にバインドします。詳細は[RegisterFunction](registerfunction.md)を参照してください。
以下の属性をサポートします：
* rfname：文字列。登録済みの関数名。
* params：オブジェクト型。登録関数呼び出し時に渡されるパラメータ。
```html