JavaScriptイベント処理についてメモ


クックブックにあった例を少し改良し、要約的にメモっとく。忘れないように。

<script type="text/javascript">

	listenEvent(window, "load", function(){
		listenEvent(document.getElementById("hoge"), "click", processDivClick);
		listenEvent(document.getElementById("fuga"), "click", processButtonClick);
	});
	
	function processDivClick() {
		alert("divclick!");
	}
	function processButtonClick() {
		alert("buttonClick!");
	}

	function listenEvent(eventTarget, eventType, eventHandler) {
		//DOMLevel2のイベント処理(chrome,safari,opera,firefox)
		if (eventTarget.addEventListener) {
			//ここのfalseとtrueの違いについて
			//falseにしておくことで、内側→外側の順でバブルアップで処理する。(この場合button→div)
			//trueにしておくことで、外側→内側の順でカスケードダウン処理する。(この場合div→button)
			eventTarget.addEventListener(eventType, eventHandler, false);
			//eventTarget.addEventListener(eventType, eventHandler, true);

		//IE9より前対応  上のIE9ではDOMLevel2のイベント処理をサポートしてるらしい。IE9を動かせる環境がうちにはありません!環境ある人はデバックしてみてください。上のifを通るのだと思いますよ!
		} else if (eventTarget.attachEvent) {
			eventTyepe = "on" + eventType;
			eventTarget.attachEvent(eventType, eventHandler);

		//IE5以前対応 いわゆる「window.onload = 」的なDOMLevel0のイベントハンドラ設定
		} else {
			eventTarget["on" + eventType] = eventHandler;
		}
	}
</script>

↓HTML

<body>
	<div id="hoge">
		<input id="fuga" type="button" value="osu" />
	</div>
</body>

ここではwindow.onload = funcNameといった形で、イベントハンドラを設定していません。というのも、なんらかのJavaScriptライブラリをアプリケーションで使用おり、この方法でイベントハンドラを設定している場合、ライブラリの設定を上書きしてしまう可能性があるためです。よってなるべく、DOMLevel2のaddEventListenerを使いましょうということになるのですね。


window.onload = funcNameを使用する場合の代替案として、以下のような例が出ています。

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}

これならば、もし使用するライブラリでwindow.onloadに関数が設定されていた場合でも『「元の関数を呼び出し、ついで引数で受け取る関数を呼ぶ」という関数』を設定できるわけですね!


あと忘れがちなのが、DOMLevel2のaddEventListener()の二番目の引数は「on」付かないからね。「onload」でなく「load」「onclick」でなく「click」という文字列ですからね!よろしくお願いします。


それにしても「いんたーねっとえくすぷろーらー」うっとうしいなー。
もうつかわないでください。お願いいたします。