イベントの処理を追加するスクリプト
通常イベントが発生した場合の処理を記述する場合は、HTMLタグにイベントハンドラ処理を追加するか、
「オブジェクト名.イベントハンドラ=function(引数){処理の内容;}」といった記述で動的にイベントをハンドリングするかのどちらかになる。
ただしこれらの方法では既存のイベントハンドラの記述を上書きしてしまうので、他のJavaScriptライブラリなどと同時に利用する場合は、イベントを扱う処理で期待どうりの動作をしないことがある。
イベントの処理を上書きするのではなく、イベントの処理を追加すれば他のスクリプトと干渉する事がない。
//filename:MyLib.js if(!MyLib) var MyLib = new Object(); MyLib.event = { observe: function(target, eventType, listener, useCaptrue){ useCaptrue = useCaptrue || false; if(target.addEventListener){ target.addEventListener(eventType, listener, useCaptrue); }else if(target.attachEvent){ this.__addEvent(target, eventType, listener); } }, stop: function(event){ event = window.event || event; if(typeof(event.preventDefault) == "function"){ event.preventDefault(); event.stopPropagation(); }else{ event.returnValue = false; event.cancelBubble = true; } }, __addEvent: function(target, eventType, listener){ if(target["__" + eventType] == undefined){ var exists = target["on" + eventType]; target["__" + eventType] = new Array(); if(exists != null){ target["__" + eventType].push(exists); } target["on" + eventType] = this.__reflectEvent; }else{ for(var i in target["__" + eventType]){ if(target["__" + eventType][i] === listener) return; } } target["__" + eventType].push(listener); }, __reflectEvent: function(){ var event = window.event; for(var i in this["__" + event.type]){ this["__" + event.type][i].apply(this, [event]); } } }
//イベントを追加 MyLib.event.obseve(オブジェクト,イベント名,function(){処理の内容}, false); //イベントをキャンセル MyLib.event.stop(イベントオブジェクト); //実際の利用例 //id名にtext-linkが設定されたa要素をクリックするとアラートが表示される var anchor=document.getElementById("text-link"); MyLib.event.observe(anchor,"click",function(event){ alert("テキストリンクがクリックされました。"); MyLib.event.stop(event); }; false);