jQueryを使わない方法「イベントリスナーを独自に書く」

2015年1月17日

Javascript Tips プログラミング

「addEventListener」を書いてonclickなどにイベント処理を追加するのは、かなり便利だが、IEに対応するためには、分岐処理が必要になる。 なぜならIEは「attatcheEvent」って書かないといけないから。 なんという不憫なブラウザだ!

概要

下記コードにより、どんなブラウザでも対応可能なイベント追加処理が行える。

仕様

param @ t : イベントを追加する対象のエレメント(windowも可) param @ m : on***というイベントのonを削ったモノを書く(click,mouseover,load...) param @ f : functionを記述できる。※無名関数で書くとより良い

コード

(function(){ var $$={}; $$.event = { add:function(t, m, f){ //other Browser if (t.addEventListener){ t.addEventListener(m, f, false); } //IE else{ if(m=='load'){ var d = document.body; if(typeof(d)!='undefined'){d = window;} if((typeof(onload)!='undefined' && typeof(d.onload)!='undefined' && onload == d.onload) || typeof(eval(onload))=='object'){ t.attachEvent('on' + m, function() { f.call(t , window.event); }); } else{ f.call(t, window.event); } } else{ t.attachEvent('on' + m, function() { f.call(t , window.event); }); } } } }; return $$; })();

使い方

//ページ起動時にアラート表示 $$LIB.event.add(window,"load",function(){alert("読み込み完了)}); //特定のボタンを押した時にアラート $$LIB.event.add(document.getElementById("hoge"),"click",function(){alert("hoge-click")});

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。