Class Library > Action

Action

目次

はじめに

Action クラスはイベントを扱う汎用のクラスです。 DHTML でのレイヤー上のイベントやブラウザ上のイベントをクロスブラウザで実現します。 このクラス（ファイル）を読み込むと、Client クラスとElement クラスに新たなイベントを扱うメソッドが追加されます。そのため他のクラスとは意味合いが違うので注意して下さい。
「Action クラスはイベント用のメソッドを追加するクラス」と覚えておいて下さい。

このクラスでは Dimension クラス、Point3 クラス、Client クラス、Element クラスを使用しています。

使用例

function bwListener( e ){
    // イベントの発生位置座標をステータスバーに表示
    status = Client.getEventAbsolutePosition( e );
}

// ブラウザ上の mousemove 時のイベントハンドラを bwListener に設定
Client.setEventListener( Action.MOUSEMOVE , bwListener );

------------------------------------------------------------------------------

var count = 0 ;

function listener(){
    if( count < 10 ){ // count が 10 より小さいならレイヤーの内容を変える
         element0.setText( count++ );
    }else{ // イベントの開放
         element0.clearEventListener( Action.MOUSEDOWN | Action.MOUSEUP );
    }
}

var element0 = new Element( "LAYER0" );

// LAYER0 の mousedown , mouseup 時のイベントハンドラを listener に設定
element0.setEventListener( Action.MOUSEDOWN | Action.MOUSEUP , listener );

------------------------------------------------------------------------------

var element1 = new Element( "LAYER1" );

// LAYER1 をドラッグ可能にする
element1.setDrag( true );

クラス変数

number MOUSEDOWN =   1 ;
number MOUSEUP   =   2 ;
number MOUSEOVER =   4 ;
number MOUSEOUT  =   8 ;
number MOUSEMOVE =  16 ;

number CLICK     =  64 ;
number DBLCLICK  = 128 ;
           ・
           ・
           ・
これらはイベントのタイプを表します。 これらの変数を使い、イベントの設定を行います。 値は Netscape4.7 に準拠したものです。 絶対に変更しないで下さい。

クラスメソッド

ボタン : isPrimary , isSecondary
boolean isPrimay( e );
boolean isSecondary( e );
発生したイベントがプライマリボタン（左）かセカンダリボタン（右）かを判定します。 
function listener( e ){
    if( Action.isPrimary( e ) ){
        alert( "左クリック" );
    }else if( Action.isSecondary( e ) ){
        alert( "右クリック" );
    }else{
        alert( "？クリック" );
    }
}

// レイヤー LAYER のクリック時のイベントハンドラを listener に設定
new Element( "LAYER" ).setEventListener( Action.CLICK , listener );
イベントタイプの取得 : getEventType
string getEventType(e);
発生したイベントのタイプを文字列で返します。 
function listener( e ){
    alert( Action.getEventType( e ) ); // 結果は mousedown
}

// レイヤー LAYER のクリック時のイベントハンドラを listener に設定
new Element( "LAYER" ).setEventListener( Action.MOUSEDOWN , listener );
標準出力文字列 : toString
string toString();
Action クラスの標準出力文字列を返します。返される文字列は Action です。 
status = Action ; // 結果は Action

Client クラスに追加されるメソッド

イベントハンドラの設定 : setEventListener
void setEventListener( number type , function handler );
ブラウザ上でのイベントハンドラの設定を行います。
type には Action クラスのクラス変数を指定します。 複数のイベントを設定したい場合、| ( OR 演算子 )を使用します。 
// ブラウザ上のクリックイベントの処理先を clickListener に設定します。
Client.setEventListener( Action.CLICK , clickListener );

// ブラウザ上の MOUSEDOWN イベントと MOUSEUP イベントの処理先を listener に設定します。
Client.setEventListener( Action.MOUSEOVER | Action.MOUSEUP , listener );
イベントの解除 : clearEventListener
void clearEventListener( number type );
ブラウザ上で設定されたイベントの解除を行います。
type には Action クラスのクラス変数を指定します。 複数のイベントを解除したい場合、| ( OR 演算子 )を使用します。 
// ブラウザ上のクリックイベントを解除します。
Client.clearEventListener( Action.CLICK );

// ブラウザ上の MOUSEDOWN イベントと MOUSEUP イベントを解除します。
Client.clearEventListener( Action.MOUSEOVER | Action.MOUSEUP );
イベント発生絶対位置の取得 : getEventAbsolutePosition
Dimension getEventAbsolutePosition( e );
ブラウザ上のイベントが発生した絶対位置を取得します。
絶対位置というのはブラウザのスクロール分を足した位置という意味です。 ブラウザがスクロールしていない場合、↓で説明する getEventRelativePosition と等価になります。 
function listener( e ){
    // マウスの絶対位置をステータスバーに表示
    status = Client.getEventAbsolutePosition( e ); // 結果は Dimension : ( 800 , 1000 ) など
}

Client.setEventListener( Action.MOUSEMOVE , listener );
イベント発生相対位置の取得 : getEventRelativePosition
Dimension getEventRelativePosition( e );
ブラウザ上のイベントが発生した相対位置を取得します。
getEventAbsolutePosition と違い、スクロール分は加味されません。 常にブラウザの表示可能領域の左上端からの位置を返します。 
function listener( e ){
    // マウスの相対位置をステータスバーに表示
    status = Client.getEventRelativePosition( e ); // 結果は Dimension : ( 100 , 200 ) など
}

Client.setEventListener( Action.MOUSEMOVE , listener );

Element クラスに追加されるメソッド

イベントハンドラの設定 : setEventListener
void setEventListener( number type , function handler );
レイヤー上でのイベントハンドラの設定を行います。
type には Action クラスのクラス変数を指定します。 複数のイベントを設定したい場合、| ( OR 演算子 )を使用します。 
var element0 = new Element( "LAYER0" );
// レイヤー LAYER0 のクリックイベントの処理先を listener0 に設定します。
element0.setEventListener( Action.CLICK , listener0 );

var element1 = new Element( "LAYER1" );
// レイヤー LAYER1 の MOUSEDOWN イベントと MOUSEUP イベントの処理先を listener1 に設定します。
element1.setEventListener( Action.MOUSEOVER | Action.MOUSEUP , listener1 );
イベントの解除 : clearEventListener
void clearEventListener( number type );
レイヤーに設定されたイベントの解除を行います。
type には Action クラスのクラス変数を指定します。 複数のイベントを解除したい場合、| ( OR 演算子 )を使用します。 
var element0 = new Element( "LAYER0" );
// レイヤー LAYER0 のクリックイベントを解除します。
element0.clearEventListener( Action.CLICK );

// レイヤー LAYER1 の MOUSEDOWN イベントと MOUSEUP イベントを解除します。
new Element( "LAYER1" ).clearEventListener( Action.MOUSEOVER | Action.MOUSEUP );
イベント発生絶対位置の取得 : getEventAbsolutePosition
Dimension getEventAbsolutePosition( e );
レイヤー上で発生したイベントのブラウザ上での絶対位置を取得します。
絶対位置というのはブラウザのスクロール分を足した位置という意味です。 ブラウザがスクロールしていない場合、↓で説明する getEventRelativePosition と等価になります。 
var element = new Element( "LAYER" );

function listener( e ){
    // マウスの絶対位置をステータスバーに表示
    status = element.getEventAbsolutePosition( e ); // 結果は Dimension : ( 800 , 1000 ) など
}

element.setEventListener( Action.MOUSEMOVE , listener );
イベント発生相対位置の取得 : getEventRelativePosition
Dimension getEventRelativePosition( e );
レイヤー上で発生したイベントのブラウザ上での相対位置を取得します。
getEventAbsolutePosition と違い、スクロール分は加味されません。 常にブラウザの表示可能領域の左上端からの位置を返します。 
var element = new Element( "LAYER" );

function listener( e ){
    // マウスの相対位置をステータスバーに表示
    status = element.getEventAbsolutePosition( e ); // 結果は Dimension : ( 800 , 1000 ) など
}

element.setEventListener( Action.MOUSEMOVE , listener );
レイヤー基準イベント位置の取得 : getEventElementPosition
Dimension getEventElementPosition( e );
レイヤー上で発生したイベントのレイヤー上の位置を取得します。
位置の基準点(0,0)はレイヤーの左上端です。 つまり、このメソッドで得られる値はレイヤーのサイズを越えることはありません。 
var element = new Element( "LAYER" );

function listener( e ){
    // マウスの相対位置をステータスバーに表示
    status = element.getEventElementPosition( e ); // 結果は Dimension : ( 50 , 30 ) など
}

element.setSize( 200 , 100 );
element.setEventListener( Action.MOUSEMOVE , listener );
ドラッグ設定 : setDrag
void setDrag( boolean dragable );
レイヤーのドラッグを設定します。
引数( dragable )が true のときドラッグ可、false のときドラッグ不可の状態になります。→ 例 
new Element( "LAYER" ).setDrag( true );

メソッド一覧

Action クラスで使用できるクラスメソッド、
Client クラスと Element クラスに新たに追加されるメソッドのリストです。
型メソッド名説明
Action クラス - クラスメソッド
booleanisPrimaryプライマリボタンか判定
booleanisSecondaryセカンダリボタンか判定
stringgetEventTypeイベントタイプの取得
stringtoString標準出力文字列
Client クラス - クラスメソッド
voidsetEventListenerブラウザ上のイベントハンドラ設定
voidclearEventListenerブラウザ上のイベントの解除
DimensiongetEventAbsolutePosition絶対位置の取得
DimensiongetEventRelativePosition相対位置の取得
Element クラス - メソッド
voidsetEventListenerレイヤーのイベントハンドラ設定
voidclearEventListenerレイヤーのイベントの解除
DimensiongetEventAbsolutePosition絶対位置の取得
DimensiongetEventRelativePosition相対位置の取得
DimensiongetEventElementPositionレイヤー基準で位置の取得
voidsetDragレイヤーのドラッグ設定

補足

■　target.setEventListener( eventType , listener ) という書き方
target.setEventListener( eventType , listener )
この書き方に慣れていない方もいるかもしれませんので補足しておきます。意味は
「対象となる target に関して、eventType のイベントが発生したら listener に処理させる」
ということです。簡単ですね。こういった書き方は、一般的な書き方なので覚えておいて損はないでしょう。
■　e って何？
実行例とか、宣言の仕方とかに e という文字が出てましたね。

isPrimary( e ) , getEventType( e ) , getAbsolutePosition( e );

の e です。これを書いているのは Netscape 互換のためのものです。 Internet Explorer では、イベントオブジェクトは常に event ですが、Netscape では任意の引数でとることができます。
逆にいうと設定してあげないとイベントとしての処理が何も行えません。
例えば↓のプログラムは Netscape のイベントを用いた処理の例で、内容はブラウザ上のマウスが動いたのを感知し、そのマウスの位置をステータスバーに表示するというものです。 
function listener( e ){
    status = "( " + e.pageX + " , " + e.pageY + " )" ; // 結果は ( 300 , 200 ) など
}

document.body.captureEvents( Event.MOUSEMOVE );
document.body.onmousemove = listener ;
つまり、e を介してイベントの処理が行われていることが分かると思います。 前述したように任意の引数でよいので、 e を evt とかに変えても何の問題もありません。
では、上と（大体）同じ処理を Intenet Explorer で行いましょう。 
function listener(){
    status = "( " + event.clientX + " , " + event.clientY + " )" ; // 結果は ( 300 , 200 ) など
}

document.body.onmousemove = listener ;
違いは分かりますよね。listener 関数の引数 e がなくなり、event を介して処理が行われています。Netscape 互換を考える場合、この e は必要なので必ず書くようにして下さい。

最後に Action クラスを用いた上二つと（大体）同じ処理を行うプログラムを書いておきます（大体というのは絶対位置か相対位置かの違いです。特に気にしなくても良いです）。 
function listener( e ){
    status = Client.getEventAbsolutePosition( e ); // 結果は Dimension : ( 300 , 200 ) など
}

Client.setEventListener( Action.MOUSEMOVE , listener );
■　絶対位置、相対位置、レイヤー基準位置
Element クラスに追加されたメソッドにはイベントの絶対位置、相対位置、レイヤー基準位置 を取得するメソッドがありましたが、僕がこのように書いているだけで何のこっちゃ分からないと思います(^^); 説明するより実例を見た方が分かりやすいでしょう → 位置の確認