2009/1/23 金曜日

javascript 汎用イベント関数とイベント関数まとめ

Filed under: JavaScript — admin @ 15:34:21

基本的にaddEventListenerを使う。IEは現時点で対応してないのでattachEventを使う。※仮に今後対応した場合も大丈夫なようにしておいてある。これだけなら、どこにでもある実装で面白くないので、onXXXXX系(onclick等)のIE旧来イベントにも一応対応。記事としてはこっちがメイン。onXXXXX系は、複数指定すると、前の内容を上書きしてしまう特性がある。が、前の関数をappendすることによってそれを回避している。肝は自分自身の関数を一時的に別の変数に格納しているところ。ここを直接指定してしまうと無限ループに陥り、スタックオーバーフローを起こす。また、PHPの可変変数のようにwindow.onclick = window[”onclick”] のようにアクセスしているのもポイント。

/* Event関数 */
function addEvent(elm,type,func){
  if(! elm){ return false;}
  if (elm.addEventListener) { //for W3C DOM
      elm.addEventListener(type, func, false);
  } else if
     (elm.attachEvent)      { //for IE
      elm.attachEvent('on' + type, func);
  } else if     ( 'on' + type in elm)  { //onXXXX
      // 別の変数に格納しないと
      // 無限ループしてstack overflowを起こす
      f = elm[ 'on' + type ];
      elm[ 'on' + type ] = function(){
      if(f!==null){f();};func(); }
  } else {
    return false;
  }
}
No Tags

コメント (77) »

この記事にはまだコメントがついていません。

コメント RSS トラックバック URL

コメントをどうぞ

You must be logged in to post a comment.