2.1.36. ページ内イベント定義¶

2.1.36.1. コードサンプル¶

プルダウンで特定の項目を選択した場合に確認のダイアログを表示する例

<event:listen event="select.amount change">
  <event:confirm
    message="この商品の注文をキャンセルしますがよろしいですか？"
    condition=":is-blank">
  </event:confirm>
</event:listen>

2.1.36.2. 仕様¶

イベントの監視と捕捉

本ウィジェットは、親要素内で発生するイベントを監視する。 監視するイベントは event属性 に以下のいずれかの書式で指定する。

1. [イベント名]
2. [セレクタ式] + (半角スペース) + [イベント名]

次のソースコードは前者の書式を使用した例である。 親要素であるフォーム要素 (form#usrForm) 内の入力要素の変更を監視し、 変更があった場合にダイアログを表示させる。

<form id="usrForm">
  <event:listen event="change">
    <event:alert
      message="変更を反映するには「確定ボタン」を押してください。"
      revert="false">
    </event:alert>

    ... (中略) ...

  </event:listen>
</form>

上記のイベント定義に相当するJavaScriptの実装はおおまかには以下のようになる。

$(function()  {
  $('#usrForm').on('change', function() {
    //
    // ダイアログ表示処理の実装コード
    //
  });
});

一方、後者の書式では、イベントの種別とともにイベントの発生元の限定するセレクタ式を指定する。 次のソースはこれを利用した例である。

この例では、親要素であるフォーム内のクリックイベントを監視する。 クリックイベントの発生元がサブミットボタンであった場合にダイアログを表示させる。

<form id="usrForm">
  <event:listen event="input[type='submit'] click">
    <event:confirm
      message="設定を変更します。よろしいですか。">
    </event:confirm>

    ... (中略) ...

  </event:listen>
</form>

なお、このイベント定義に相当するJavaScriptの実装は おおまかにいうと以下のようなものになる。

$(function()  {
  $('#usrForm').on('click', "input[type='submit']", function() {
    //
    // ダイアログ表示処理の実装コード
    //
  });
});

イベントの捕捉とアクションの実行

イベントのバブリングおよびデフォルトアクションの実行は通常のJavaScriptのイベントモデルに従う。 すなわち、イベントの捕捉はイベントの発生元要素からその親要素に対して順次行われる。

event要素 に合致するイベントを捕捉すると、ウィジェットの子要素となるイベントアクションを順次実行する。 すべてのアクションの実行が完了すると親要素に対するイベントバブリングを再開する。

ただし、一部のイベントアクション ( 確認ダイアログ表示イベントアクション など) では後続イベントアクションの実行中止や、 イベントバブリングやデフォルトアクションの停止を行わせることが可能である。

重要

サブミットイベントを監視する場合は、click イベントを監視すること。 Nablarchカスタムサブミットイベント を監視すると、イベント停止時に他の機能が動作しなくなる可能性があるため、サポートしていない。

コンテキストの指定

すでに述べたように、このウィジェットはデフォルトで親要素内のイベントを監視対象とするが、 context属性 を指定することにより、画面内の任意の要素内のイベントを監視することができる。

これは、画面内の他のインクルードJSP上の要素を監視する場合などに使用する。 以下はcontext属性の使用例である。 この例では、画面内のすべてのform要素内のサブミットボタン上のイベントを監視対象としている。

<event:listen
  event="input[type='submit'] click"
  context="form">
  <event:confirm
    message="設定を変更します。よろしいですか。">
  </event:confirm>

  ... (中略) ...

</event:listen>

重要

context属性は、 event属性 内に記述するセレクタ式の代替として使用できるが、 後者の方が性能的に優れているので、そのような用途では使用しないこと。

例えば、以下の2つのコードは、ほぼ同じ挙動となる。

<event:listen
  event="#usrForm input[type='submit'] click"
  context="">
  <event:confirm
    message="設定を変更します。よろしいですか。">
  </event:confirm>

  ... (中略) ...

</event:listen>

<event:listen
  event="click"
  context="#usrForm input[type='submit']">
  <event:confirm
    message="設定を変更します。よろしいですか。">
  </event:confirm>

  ... (中略) ...

</event:listen>

しかし、このソースコードと等価なJavaScriptは以下のようなものとなり、 画面内のすべてのサブミットボタンにイベントを登録することなる。 このため、監視対象のノードに比例して メモリ使用量および画面ロード時の処理時間が増加する。

$(function()  {
  $("#usrForm input[type='submit']").on('click', function() {
    //
    // ダイアログ表示処理の実装コード
    //
  });
});

属性値一覧 [◎ 必須属性 ○ 任意属性 × 無効(指定しても効果なし)]

2.1.36.3. 内部構造・改修時の留意点¶

部品一覧