イベントのところの続編

イベントだけどここまで出来てるっぽいよ。

sample.js

debug = function(evt, element){
  alert(evt);
  alert(element);
}

var o = {
  show : function(v){
    alert(v);
  },
  debug : function(evt, element){
    this.show(evt);
    this.show(element);
  }
}

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript" type="text/javascript" src="../js/kumu/kumu.js"></script>
<script language="JavaScript" type="text/javascript" src="../js/kumu/event.js"></script>
<script language="JavaScript" type="text/javascript" src="../js/kumu/sample.js"></script>
<script>

KumuEventConf = {
  click_test : debug,
  click_test1 : o.debug.bindScope(o)
}

</script>
</head>

<body>
<div id='test'>Test_DIV</div>
<div id='test1'>Test1_DIV</div>
</body>
</html>

基本的な使用方法にはこんな感じになると思います。
実務レベルだとこのようにKumuEventConfには別ファイルに書かれてる関数を設定していく事になると思います。
（再利用するのが普通でしょう）
指定方法は

イベント名_id = コールバック関数

になります。
動詞（イベント名）が先に来たほうが~~都合が良い~~javaの動詞+名詞順のメソッド名に近くなじみがあるのでこのように書きます。
KumuEventConfはTopLevelにいるのでそいつに設定を書くと動きます。

本来EventListenerは

function (event){
}

ですが
個人的にはインターフェースがeventだけだと寂しいのでelementも追加しています。

function (event, element){
}

でイベントの起きているelementも返ってきます。
bindScopeはprototype.jsでいうところのbindです。
実際、bindが使えないとcallbackを使用する開発などは非常に辛いのです。
（たとえばAutoCompleteとか）

あとあまり使わないパターンですが関数主体で関数名からもイベント登録できます。

function click_test(evt, element){
  alert(evt);
  alert(element);
}
click_test.resgistEvent();

でidがtestの要素にclickすると関数が呼ばれます。
これだと無名関数が使えないのでそれはそれで辛いです。
（再利用する際その関数が無名関数だった）
無名関数を登録する場合は別途名前をつけると動作します。

test = function(evt, element){
  alert(evt);
  alert(element);
}
test.__name = 'click_test'; 
test.resgistEvent();

とまあこんな感じになりますす。
あとidがないと動かないのは困るというパターンもあります。
(AutoCompleteのように動的に要素をガンガン作るパターン）
その場合はregistEventToElementで任意の要素を直接指定する事もできます。
というわけでまあ土台はちょっとできた。
うくく。

Doge log

Abby CTO 雑賀力王のオフィシャルサイトです

イベントのところの続編

sample.js

html