Seasar DI Container with AOP

Kumu.Eventとは

Kumu.EventはHTML要素にイベント処理を簡単に割り当てるように作られたjavascriptのライブラリです。

Kumu.EventはKumuに依存しているため、kumu.jsを必ず先に読み込んでおく必要があります。

Kumu.Eventは以下の機能を提供します。

  1. HTML要素へのイベント処理の割当
  2. JSONによるイベント処理の割当
  3. 関数によるイベント処理の割当

HTML要素へのイベント処理の割当

Kumu.Eventを使用するとHTMLに直接"onclick"などを記述せずにイベント処理を割り当てる事が出来ます。

従来では以下のように記述しますがKumu.Eventを使用するとonclickを記述せずに済みます。

イベント処理を割り当てる

イベント処理を割り当てるにはKumu.Event.addEventを使用します。

通常時の場合と比較すると以下のようになります。

// 従来 DOMに記述する
<span onclick="alert('TEST');">クリックするとalert</span>

Kumu.Eventを使用する場合は以下のようになります。

<span id="foo">クリックするとalert</span>

<script type="text/javascript">
  var test = funciton(evt){
    alert('TEST');
  };
  Kumu.Event.addEvent('foo', 'click', test);
</script>

※DOMの要素が読み込める状態にするため対象の要素より下にscriptを記述しています。

Kumu.Event.addEventには以下の引き数を渡します。

  • 割り当てたい要素のidあるいはDOM要素
  • イベント名の文字列
  • イベント発生時呼ばれる関数
  • キャプチャの使用（useCapture)

イベント名にはイベントの種類を指定します。

イベントの種類の代表的なものは以下です。

  • load
  • unload
  • change
  • click
  • dbclick
  • mouseover
  • mouseout
  • blur
  • keydown
  • keyup
  • keypress
  • mousedown
  • mouseup

またイベント発生時呼ばれる関数には発生したeventが渡されます。

イベント処理が発生した要素を取得するには以下のように記述します。

<span id="foo">クリックするとalert</span>

<script type="text/javascript">
  var test = funciton(evt){
    //イベントが発生した要素を取得
    var element = evt.target || evt.srcElement;
    alert(element);
  };
  Kumu.Event.addEvent('foo', 'click', test);
</script>

またKumu.Event.addEventは割り当てたイベントの状態をもったprocess objectを返します。

process objectはイベントを解放したりすることができます。

<span id="foo">クリックするとalert</span>

<script type="text/javascript">
  var test = funciton(evt){
    //イベントが発生した要素を取得
    var element = evt.target || evt.srcElement;
    alert(element);
  };
  var process = Kumu.Event.addEvent('foo', 'click', test);
  // 実行状態でなければcancel
  process.cancel();

</script>

イベント処理を削除する

割り当てたイベントを解放するにはKumu.Event.addEventの返り値であるprocess objectを使用します。

process objectは割り当てられた要素分だけArrayで返されます。

process objectは割り当てられたイベントを持っておりremove関すを使うとイベントを解放することができます。

<span id="foo">クリックするとalert</span>

<script type="text/javascript">
  var test = funciton(evt){
    //イベントが発生した要素を取得
    var element = evt.target || evt.srcElement;
    alert(element);
  };
  var process = Kumu.Event.addEvent('foo', 'click', test);
  process[0].remove();

</script>

さらにprocess objectを保持しておくとイベントを再度簡単に割り当てたりする事も出来ます。

<span id="foo">クリックするとalert</span>

<script type="text/javascript">
  var test = funciton(evt){
    //イベントが発生した要素を取得
    var element = evt.target || evt.srcElement;
    alert(element);
  };
  var process = Kumu.Event.addEvent('foo', 'click', test);
  process[0].remove();
  //再度割り当て
  process[0].add();

</script>

process objectはKumu.Event.processでも参照することが可能です。

イベントの管理

Kumu.Event.addEventで割り合てたイベントはKumu.Event内で管理しています。

割り当てたイベントはKumu.Event.processで参照することができます。

Kumu.Event.processの構造は[要素名]をキーにしたobjectになっています。

その中には[イベント名]をキーにしたobjectが入っており値には割り当てた順でprocess objectが入っています。

JSONによるイベント処理の設定

Kumu.Eventでは更に簡単にイベントを割り当てる事が出来ます。

Kumu.Eventでは設定ファイルの代わりにKumuEventConfという名前のglobalな領域のJSONを設定として読み込みます。

KumuEventConfを使用すると以下のように設定することができます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/kumu.js"></script>
<script type="text/javascript" src="./js/event.js"></script>
<script type="text/javascript">
  var debug = function(evt, element){
    alert(evt);
    alert(element);
  };

  var function on(evt){
    var elem = (evt.target) ? evt.target : evt.srcElement;
    if(elem.nodeType == 3){
      elem = elem.parentNode;
    }
    elem.className = 'on';
  };

  function off(evt){
    var elem = (evt.target) ? evt.target : evt.srcElement;
    if(elem.nodeType == 3){
      elem = elem.parentNode;
    }
    elem.className = 'off';
  };

  KumuEventConf = {
    'click_test:id1' : debug,
    'mouseover_change' : on,
    'mouseout_change' : off
  }
</script>
<style type="text/css">
  .on {
    background-color: #ffb;
  }
  .off{
    background-color: #ffffff;
  }
</style>
</head>
<body>
<div id='test:id1'>アラートが出ます</div>
<ul>
  <li id="change">mouseover</li>
  <li id="change">mouseover</li>
  <li id="change">mouseover</li>
  <li id="change">mouseover</li>
  <li id="change">mouseover</li>
</ul>
</body>
</html>

KumuEventConfはキーから割り当てるイベントおよび要素を特定します。

KumuEventConfは以下のような仕様で動作します。

  • キー : イベント名 + '_' + 要素のid名
  • 値 : イベント発生時に呼ばれる関数

イベント発生時に呼ばれる関数はイベント、addEventで指定した要素のid(あるいは要素そのもの）を引き数に実行されます。

KumuEventConfの設定はドキュメントが全てloadされた状態時に有効になります。

関数によるイベント処理の割当

Kumu.Eventでは関数からもイベントを割り当てる事ができます。

Kumu.EventはFunction.prototypeに関数名からイベント割当を行う関数を追加します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/kumu.js"></script>
<script type="text/javascript" src="./js/event.js"></script>
<script type="text/javascript">
  var test = function(){

    function click_test:id1(evt, element){
      alert(evt);
      alert(element);
    };
    click_test:id1.registEvent();

    function mouseover_change(evt){
      var elem = (evt.target) ? evt.target : evt.srcElement;
      if(elem.nodeType == 3){
        elem = elem.parentNode;
      }
      elem.className = 'on';
    };
    mouseover_change.registEvent();

    function mouseout_change(evt){
      var elem = (evt.target) ? evt.target : evt.srcElement;
      if(elem.nodeType == 3){
        elem = elem.parentNode;
      }
      elem.className = 'off';
    }
    mouseout_change.registEvent();
  };
  test = resgistOnLoad();

</script>
<style type="text/css">
  .on {
    background-color: #ffb;
  }
  .off{
    background-color: #ffffff;
  }
</style>
</head>
<body>
<div id='test:id1'>アラートが出ます</div>
<ul>
  <li id="change">mouseover</li>
  <li id="change">mouseover</li>
  <li id="change">mouseover</li>
  <li id="change">mouseover</li>
  <li id="change">mouseover</li>
</ul>
</body>
</html>

イベント処理を割り当てる際によくある問題はscriptを評価する際に対象の要素がなくエラーになる事です。

<script type="text/javascript">
  var test = funciton(evt){
    //イベントが発生した要素を取得
    var element = evt.target || evt.srcElement;
    alert(element);
  };
  //　この時点でfooは見えない
  Kumu.Event.addEvent('foo', 'click', test);
</script>

<span id="foo">クリックするとalert</span>

registOnLoad を使うと指定した関数をHTMLを全て読み込んだ時に実行することができます。

<script type="text/javascript">
  var load = function(){
    var test = funciton(evt){
      //イベントが発生した要素を取得
      var element = evt.target || evt.srcElement;
      alert(element);
    };
    //　この時点でfooは見えない
    Kumu.Event.addEvent('foo', 'click', test);
  };
  load.registOnLoad();
</script>

<span id="foo">クリックするとalert</span>

リファレンス

Kumu.Event.addEvent(id, eventName, useCapture)

指定したidの要素にイベント処理を割り当てます。

idではなくelement自身を渡す事も出来ます。また同一idの要素が複数存在する場合はそれら全てにイベントを割り当てます。

イベント名には以下のものが使用できます。

  • load
  • unload
  • change
  • click
  • dbclick
  • mouseover
  • mouseout
  • blur
  • keydown
  • keyup
  • keypress
  • mousedown
  • mouseup

addEventメソッドは自身の状態を持ったprocess objectの配列を返します。

var test = funciton(evt){
  //イベントが発生した要素を取得
  var element = evt.target || evt.srcElement;
  alert(element);
};
vat processList = Kumu.Event.addEvent('foo', 'click', test);

process objectは以下の関数を持っています。

add()

イベント処理を割り当てます。

再割当したい場合に使用します。

remove()

割り当てたイベント処理を解放します。

cancel()

実行状態を見てキャンセル可能であれば関数を実行できないようにします。

clear()

割り当てたイベント処理を解放します。

Kumu.Event.processからも解放します。

Kumu.Event.stopEvent(event)

eventをキャンセルします。

anchorなどに使用するとクリックをキャンセルして押せなくすることができます。

var test = function(evt){
  Kumu.Event.stopEvent(evt);
};
Kumu.Event.addEvent(document.body, 'click' test);

Kumu.Event.unloadEvent()

Kumu.Event.addEventで割り当てた全てのイベントを解放します。

Kumu.Event.unloadEvent();

Kumu.Event.regist(object)

指定したobjectのキーからイベント処理を割り当てます。

  • キー : イベント名 + '_' + 要素のid名
  • 値 : イベント発生時に呼ばれる関数
var obj = {
  'click_test' : function(){
    alert('test');
  }
};

// id='test'の要素のclickイベントに割り当てる
Kumu.Event.regist(o);

Kumu.Event.addOnLoadEvent(function)

指定した関数をonload時に実行します。

var test = function(evt){
  alert('test');
}
Kumu.Event.addOnLoadEvent(test)

Kumu.Event.addOnUnLoadEvent(function)

指定した関数をonunload時に実行します。

var test = function(evt){
  alert('test');
}
Kumu.Event.addOnUnLoadEvent(test)

Function.prototype

registEvent(scope)

関数名を元にイベント処理を割り当てます。

関数名はイベント名 + '_' + 要素のid名である必要があります。

引き数で実行時のscopeを渡す事ができます。

function click_test(evt, elementName){
  alert(evt);
  alert(elementName);
};

click_test.registEvent(this);

registEventToElement(scope, element)

関数名を元にイベント処理を割り当てます。

registEventは異なり、関数名から要素は特定しません。

引き数の２番目に割り当てたい要素を指定します。

関数名はイベント名 + '_' から始まる必要があります。

引き数で実行時のscopeを渡す事ができます。

function click_xxx(evt, elementName){
  alert(evt);
  alert(elementName);
};

click_test.registEventToElement(this, $i('test'));

registOnLoad(scope)

関数をonload時に実行するように登録します。

Kumu.Event.addOnLoadEvent(function)を自身に適用します。

引き数で実行時のscopeを渡す事ができます。

registOnUnLoad(scope)

関数をonload時に実行するように登録します。

Kumu.Event.addOnUnLoadEvent(function)を自身に適用します。

引き数で実行時のscopeを渡す事ができます。
Copyright© 2005-2006, The Seasar Foundation and the others. All rights reserved.