スポンサーリンク
addEventListener と attachEvent はオブジェクトにイベントを追加する関数です。
この2つは起動時に、window.onload と併用しても使えます。
window.onload は、複数書くと上書きされて消えてしまうため最後の1個だけが作動しますが、この関数を使うことで起動時の関数を複数動作させられます。
addEventListener
addEventListener は Internet Explorer 以外で使えます。
addEventListener(イベント名, イベント発生時に呼び出す関数, イベントの伝達方向)
イベント名には on がつきません。第3引数は通常は false を指定します。
true にすると、イベントが発生した瞬間、バブリングを待たずにイベントを処理できるようになります。
登録した関数は、登録順に実行されます。
例: window.addEventListener(‘load’, function(){alert();}, false);
attachEvent
attachEvent は Internet Explorer と Opera で使える関数で addEventListener と同等の働きをします。
attachEvent(イベント名, イベント発生時に呼び出す関数)
イベント名には on がつきます。
登録した関数の実行順は不規則です。
例: window.attachEvent(‘onload’, function(){alert();});
Internet Explorer とそれ以外のブラウザの両方に対応させるには
function ev(elem, event, func, useCapture){ if(elem.addEventListener){ elem.addEventListener(event, func, useCapture); }else if(elem.attachEvent){ elem.attachEvent('on'+event, func); } }
または
function ev(elem, event, func, useCapture){ try{ elem.addEventListener(event, func, useCapture); }catch(e){ elem.attachEvent('on'+event, func); } }
という形で関数を作って、次のように使います。
ev(window, 'load', function(){alert();}, false);
window.addEventListener と window.attachEvent は、window.onload と一緒に使うことも出来ます。
その場合は、window.onload の後に、この関数でイベントを追加する形になります。
ですから、呼び出される順番は、window.onload で定義した関数より後になります。
起動時に、window.onload と併用する例
<script type="text/javascript"> window.onload=function(){ /* 既に window.onload で起動スクリプトが指定されているとする */ } /* 起動時のアクションを追加 */ function ev(event , func, useCapture){ if(window.addEventListener){ window.addEventListener(event, func, useCapture); }else if(window.attachEvent){ window.attachEvent('on'+event, func); } } function addAction(){ /* 起動時に実行したい処理 */ } /* このように関数を別に定義して、関数名を入れても動作する */ ev('load', addAction, false); </script>
関連コンテンツ
スポンサーリンク
怖いくらい波に乗ってますね。書きまくり。