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」という文字列ですからね!よろしくお願いします。
それにしても「いんたーねっとえくすぷろーらー」うっとうしいなー。
もうつかわないでください。お願いいたします。