なでしこ3で部品の「変更した時」を実装する

セレクトボックスの「変更した時」

セレクトボックスで何かを選んだ時に何かを実行したい場合があると思います。
クリックした時だと開いた時にもイベントが発生するので使い勝手が悪い……

//とても使い勝手が悪い例
「あああ,いいい,ううう,えええ」を「,」で区切る
DOM部品＝それのセレクトボックス作成
DOM部品をクリックした時には　　//開いた時にも反応する
    対象からテキスト取得して表示
ここまで

現状、なでしこ3には「変更した時」という命令がありません(v3.3.18時点)
セレクトボックスは変更した時に「change」というイベントが発生するので、DOMイベント発火時命令をつかって実装します。
こういうイベントが発生することをイベントが発火すると表現するそうです。

//セレクトボックスの変更した時
「あああ,いいい,ううう,えええ」を「,」で区切る
DOM部品=それのセレクトボックス作成
DOM部品の「change」がDOMイベント発火時には
　　対象からテキスト取得して表示
ここまで

以下のDOM部品は変更した時「change」が発生するので同じ書き方ができます。

セレクトボックス、エディタ、チェックボックス、値指定バー、色選択ボックス、日付選択ボックス

「change」がDOMイベント発火時にはと書くとクリックした時と違って、キーボードによる変更にも反応してくれます。

changeイベント？ onchangeイベント？

部品のイベント名はjavascriptの解説サイトから調べるのですが、「change」のように「on」がつかない解説サイトと「onchange」のように「on」がついた解説サイトがあります。

DOMイベント発火時に対応するのはonがつかないほうです。

プログラムによる変更とchangeイベントの関係

プログラムによる値の変更ではchangeイベントは発生しないようです。

//プログラムからバーの値を変更してもchangeイベントは発生しない
DOM部品＝[0,5]の値指定バー作成
DOM部品の「change」がDOMイベント発火時には
    対象からテキスト取得して表示
ここまで
1秒後には
    DOM部品に5をテキスト設定　　//値は変わるがイベントは起きない
ここまで

change以外のイベントの例

画像(画像作成・imgタグ)や動画(videoタグ)は「src」属性でロードするファイルを変更するのですが、ファイルの情報(縦横のサイズなど)はロードがある程度、またはロードが全部完了しないと取得できません。

例えば……
動画の長さは「duration」をDOM属性取得すると得られます。
ただし、videoタグにsrcを設定後すぐに動画の長さ(duration)を取得しようとすると失敗します。

//失敗する例
ビデオタグ=「video」のDOM部品作成
ビデオタグの「src」に「tetris.mp4」をDOM属性設定
ビデオタグの「duration」をDOM属性取得して言う　//duration…動画の長さ

videoタグの場合、情報を取得できるところまでロードできたよ！って時にloadedmetadataイベントが発生します。
このイベントが発生した後なら動画の長さを取得できます。

//ロードを待って情報を取得する例
ビデオタグ=「video」のDOM部品作成
ビデオタグの「loadedmetadata」がDOMイベント発火時には
　　対象の「duration」をDOM属性取得して言う　//duration…動画の長さ
ここまで
ビデオタグの「src」に「tetris.mp4」をDOM属性設定