次の表は、ほとんどの XUL 要素で有効なイベントハンドラについて書かれています。イベントリスナーは addEventListener で追加し、 removeEventListener で削除することができます。
一部のイベントは、属性を使用して同様に追加することができます。属性を使用してイベントリスナーを追加した場合は、一度に一つのリスナーしか追加できません。先に追加されたリスナーは切断されます。属性名はイベント名のプレフィックスに 'on' を付加したものです。
継承 DOM イベント
イベント | 説明 |
---|---|
blur |
focus イベントの反対。blur イベントは要素がフォーカスを失った後、渡されます。
|
change |
このイベントは textbox の値が変更された時、送られます。このイベントはフォーカスが他の要素に移されるまで送られません。
|
click |
このイベントはマウスボタンが押下され、離された時、送られます。イベントオブジェクトの |
dblclick |
このイベントは click イベントのように、ユーザがマウスでダブルクリックした時のみ送られます。
これは click イベント内の detail プロパティの確認の代替手段です。
|
DOMMouseScroll |
このイベントはマウスホイールが動かされた時、コンテンツがスクロールされたかどうかに関わらず送られます。 |
focus |
focus イベントは、フォーカスを受け取った時、要素に送られます。要素がフォーカスを持つと、キーボードイベントがその要素に送られます。要素をクリックするか TAB を押下して次の要素に移動すると、フォーカスを変更することができます。
|
keydown |
keydown イベントは、フォーカスを持ち、キーが押下されたままの状態の要素に送られます。
|
keypress |
keypress イベントは、フォーカスを持ち、キーが押下され離された要素に送られます。
ユーザがキーを押下すると、まず keydown イベントが送られ、次に keypress イベント、それから keyup イベントが送られます。textbox 内では、ユーザがキーを押下したまま文字を繰り返し入力することができます。この場合、ユーザがすばやく同じキーを繰り返し押下したように、複数のキーイベントセットが送られます。
|
keyup |
keyup イベントは、フォーカスを持ち、キーが離された要素に送られます。
|
load |
このイベントは、window が完全に読み込まれた後、window に送られます。このイベントハンドラは window 要素上に置かなければなりません。またこのイベントは、image 要素、または image 属性を使用できる要素上でも使用でき、画像の読み込みが完了した時、発動します。image について、このイベントは要素ツリーを浮上 (bubble up)しないため、window の load イベントと衝突しません。
|
mousedown |
このイベントは、マウスボタンが要素上で押下されたままの状態の時、送られます。
|
mousemove |
このイベントは、マウスが要素上を移動するたびに繰り返し送られます。
|
mouseout |
この mouseout イベントは、ユーザがマウスを要素の外に移動した時、その要素に送られます。このイベントは mouseover の逆です。
|
mouseover |
このイベントは、マウスが要素上に初めて移動した時、送られます。このイベントは、ユーザへのフィードバックの提供に利用することができます。
|
mouseup |
このイベントは、要素上でマウスボタンが離された時、送られます。
|
select |
このイベントは、項目が選択された時、listbox や tree に送られます。
|
unload |
このイベントは、window が閉じられた時、window に送られます。これは close イベントの後、送られます。このイベントハンドラは window 要素上に置かなければなりません。
|
変異 DOM イベント
イベント | 説明 |
---|---|
DOMAttrModified |
このイベントは要素の属性の一つが変更された時、その要素に送られます。イベントハンドラ内では、イベントの attrName プロパティを使用して変更された属性を取得することができます。またイベントの prevValue および newValue プロパティを使用して、属性の古い値と新しい値を取得することができます。 |
DOMNodeInserted |
このイベントは要素の子としてノードが追加された時、送られます。document レベルでこのイベントを捕捉すると、 document の変更についての通知を受けることができます。 |
DOMNodeRemoved |
このイベントは要素からノードが削除された時、送られます。document レベルでこのイベントを捕捉すると、 document の変更についての通知を受けることができます。 |
ドキュメント内に変異イベントリスナが存在すると、それ以降そのドキュメントに対する DOM 操作のパフォーマンスが低下することに注意してください。簡単なテストでは、変異イベントがない場合よりも DOM 操作に 1.5 から 7 倍の時間がかかります。
共通の XUL イベント
イベント | 説明 |
---|---|
broadcast |
このイベントハンドラは observer 上に置かなければなりません。broadcast イベントは (broadcaster などの) 監視されている要素の属性が変更された時、送られます。
|
close |
このイベントは、ユーザが「閉じる」ボタンを押下し、window を閉じるように要求した時に送られます。イベントハンドラを window 要素上に置くと、window が閉じるのをトラップすることができます。close ハンドラが false を返すと、window は閉じません。true を返すと通常どおり閉じます。このイベントは、ユーザがタイトルバー上の「閉じる」ボタンを押下した時のみ発生するので注意してください。window を閉じるイベントすべてを捕捉するには unload イベントを使用してください。
|
command |
このイベントハンドラは要素が活性化された時、呼び出されます。各要素を活性化するには様々な方法があります。例えばボタンは、フォーカスされている間に、マウスでクリックしたり ENTER を押下することによって活性化することができます。メニューはマウスで選択するか、ショートカットキーの押下によって活性化することができます。このイベントは必要な場合のすべてにおいて呼ばれるため、クリックの代わりに、常に command イベントを使用してください。
|
commandupdate |
このイベントは、コマンドの更新が <commandset> 要素上で起こったとき、発生します。これは、項目の無効状態を更新するために使用します。
|
contextmenu |
このイベントは、ユーザが要素のコンテキストメニューを開こうとした時、その要素に送られます。
この開く動作はプラットフォームによって異なりますが、一般的には右クリックです。このハンドラは通常、ユーザがメニューを表示しようとした時にメニュー上のコマンドを動的に設定するのに使用されますが、popupshowing イベントを使用しても同様のことができます。このイベントハンドラが false を返すと、ポップアップの表示が抑止されます。
|
drag |
drag イベントはドラッグが発生している間、source ノード (ドラックされたノード) に送られ続けます。
|
dragdrop |
このイベントは、ドラッグしていたオブジェクトをマウスボタンを離してドロップした時、送られます。要素がドロップを受け入れる場合には、ドラッグされたオブジェクトがそこに挿入されるなど、何らかの反応を返すべきです。
|
dragend |
dragend イベントは、ドラッグが終わった時、source ノード (ドラッグされたノード) に送られます。
|
dragenter |
dragenter イベントは、マウスポインタがドラッグしながら最初に要素上を移動した時、送られます。これは mouseover イベントに似ていますが、ドラッグ中に発生します。
|
dragexit |
このイベントは、マウスポインタがドラッグ中に要素上から離れた時、送られます。これは要素上にドロップした後にも呼び出されます。これは mouseout イベントに似ていますが、ドラッグ中に発生します。
|
draggesture |
このイベントは、ユーザがマウスボタンを押したまま移動させて要素をドラッグし始めた時、送られます。
|
dragover |
mousemove イベントに関連します。このイベントは、要素上を何かがドラッグされた時、送られます。ハンドラはドラッグされているオブジェクトをドロップできるかどうかを示すべきです。
|
input |
このイベントは、ユーザが textbox にテキストを入力した時、送られます。このイベントは表示されたテキストが変更される場合のみ呼び出されるため、表示されないキーを押下しても呼び出されません。
|
overflow |
このイベントは、CSS の overflow プロパティが 'visible' 以外の値を持つ、box やその他のレイアウト要素にのみ送られます。要素のコンテンツをフルサイズで表示する十分な空間が無い場合、overflow イベントが発生します。overflow プロパティの値によっては scrollbar が現れます。例えば、box の最大サイズが 100 ピクセルで十分な空間が 80 ピクセルしか利用できないとき、overflow イベントが box に送られます。ユーザによって window のサイズが変更されるなどして要素のサイズが変更され、十分な空間が利用可能になると underflow イベントが発生します。
|
popuphidden |
このイベントは popup が隠れた後、その popup に送られます。
|
popuphiding |
このイベントは popup が隠されようとしている時、その popup に送られます。
|
popupshowing |
このイベントは popup が開かれる直前に、その popup に送られます。このハンドラは通常、ユーザがポップアップの表示を要求したときに、コンテンツを動的に設定するのに使用されます。このイベントハンドラが false を返すと、ポップアップの表示が抑止されます。 |
popupshown |
このイベントは onload イベントが開かれた window に送られるように、popup が開かれた後、その popup に送られます。
|
syncfrompreference |
このイベントは、設定 (preference)の変更によって要素が変更されようとしているとき、または設定から要素が初期化されるときに送られます。このイベントは、 prefwindow 内にあり、設定に接続されている要素にのみ送られます。これは実際のイベントではなく単なる関数呼び出しなので、属性構文を使用しなければなりません。スクリプトから何らかの値を返すことにより、設定の値の代わりに特定の値を要素に設定することができます。通常このイベントは、設定値をよりユーザインターフェイスとしてわかりやすいものにするために使用します。
|
synctopreference |
このイベントは、設定に接続されている要素に変更が加えられたときに送られます。このイベントは、 prefwindow 内にあり、設定に接続されている要素にのみ送られます。これは実際のイベントではなく単なる関数呼び出しなので、属性構文を使用しなければなりません。スクリプトから何らかの値を返すことにより、設定に要素の値の代わりに特定の値を設定することができます。
|
underflow |
このイベントは、要素をフルサイズで表示するのに十分な空間ができた時、その要素に送られます。これは CSS の overflow プロパティが 'visible' 以外の値を持つ、box やその他のレイアウト要素に適用されます。underflow イベントは、スクロール機構が必要なくなったことを示すために使用されます。
|
DOMMenuItemActive |
このイベントは、menu または menuitem がポイントやハイライトがされた時、送られます。このイベントは浮上します。 |
DOMMenuItemInactive |
このイベントは、menu や menuitem がポイントやハイライトがされなくなった時、送られます。このイベントは浮上します。 |
アクセシビリティイベント
これらのイベントは、要素に変更が加えられたことをアクセシビリティシステムに知らせるために使用されます。通常は、これらを使用することはありません。
イベント | 説明 |
---|---|
CheckboxStateChange |
このイベントは、ユーザやスクリプトによって checkbox にチェックが入ったり外れたりした時、送られます。checkbox の変更を調べるには、通常、command イベントを使用しますが、command イベントはユーザが値を変更した場合のみ送られるのに対して、CheckboxStateChange イベントはスクリプトが checkbox の checked プロパティを変更した場合にも送られます。ユーザが変更した場合、CheckboxStateChange イベントは command イベントの前に送られます。CheckboxStateChange イベントは浮上しません。 |
RadioStateChange |
このイベントは、ユーザやスクリプトによって radio ボタンが選択された時、送られます。radio button の選択を調べるには、通常、command イベントを使用しますが、command イベントはユーザが radio button の選択を変更した場合のみ送られるのに対し、RadioStateChange イベントはスクリプトが選択を変更した場合にも送られます。ユーザが変更した場合、RadioStateChange イベントは command イベントの前に送られます。RadioStateChange イベントは浮上するため、radio を内包する radiogroup にイベントハンドラを追加することもできます。 |