ブラウザ非依存のイベントハンドラの追加方法

js program

JavaScriptイベント登録を楽に実装する （event.js）あたりを参考に作成。本当は、prototype.jsのEvent.ovserveあたりを使えばよい気がしなくもないが、prototype.jsは重いので使わない方向で考える。



function addListener(evt_name, handler) {

        if ( window.addEventListener ) {

                window.addEventListener(evt_name, handler, false);

        }

        else if ( window.attachEvent ) {

                window.attachEvent("on" + evt_name, handler);

        }

}

これだと、登録解除とかはできないが多くの場合は、これで事足りる。

しかし、この関数で登録するとwindowオブジェクトにハンドラが追加されてしまう。そのため、次の例のように特定のフォームのイベントを監視するには、ハンドラーにイベントの発生原因となった要素を特定するコードを追加する必要がでてくる。



<form method="post" action="some.html">

	<input type="text" name="box1" />

	<input type="text" name="box2" />

</form>

イベント発生の原因要素を特定するには、Firefoxではevt.targetを参照し、IEではwindow.srcElementを参照すればよい。以上を踏まえると全体は次のようなコードとなる。



<script type="text/javascript">

//<![CDATA[

function doValidation(evt) {

	var e = evt ? window.event;

	var elem;

	if ( e.srcElement ) {

		elem = e.srcElement;

	}

	else if ( e.target ) {

		elem = e.target;

	}
	if ( elem && elem.name == 'box1' ) {

		// ...

	}

	// ...
}
addListener('keydown', doValidation);
//]]>

</script>
<form method="post" action="some.html">

	<input type="text" name="box1" onkeydown="doValidation(this)" />

	<input type="text" name="box2" />

</form>

たぶんもっとすっきりした方法がある気がするが、とりあえずここまで。