- ベストアンサー
<body>にwindow.onload = functionを２つ設定すると、最後に書いたイベントだけが実行されてしまいます。
<body>タグにonloadイベントを実行させる2つの外部jsを<head>内に設置し実行すると、 最後に記述したイベントだけが反映されてしまいます。 http://blog.webcreativepark.net/2008/02/26-185844.html を参考にいろいろといじってはみたのですが、 function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } js初心者でして、上の関数の中にどのように記述をすれば良いのかわかりません。 IE6・IE7・safariで動作させるには、実際にどのようなソースを書けばいいのでしょうか。 どなたかご教授いただけますでしょうか。 <head>内の外部jsは、以下のように記述しました。 <script src="/A.js" type="text/javascript"></script> <script src="/B.js" type="text/javascript"></script> </head> 外部jsのソースは以下になります。 //A.js window.onload = function() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js window.onload = function() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } 以上になります。宜しくお願い致します。
- komin-g
- お礼率50% (2/4)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
・ 参考URLに関して若干の説明をさせていただきます。 ・ 基本的事項として次の２点をまず挙げておきます。 1. 標準のイベントハンドラとして大雑把に旧来のDOMレベル0と新しいDOMレベル2の２つがあります。IEはDOMレベル2をサポートしていません。 2. DOMレベル2のaddEventListener()とIEのattachEvent()は、一つのオブジェクトに対して、複数のイベントハンドラを登録できます。 ・ 参考URLは、旧来のonloadの利用をやめて、2.の方法を薦めています。 ＞＞＞ onloadイベントを設定しているライブラリもあります。 ＞＞＞ ただ、これらの記述方法ですと、最後にonloadに設定された関数しか実行されません。 これは、#1でSAYKA様の述べられている通り、Windowオブジェクトのonloadというフィールド変数への代入により上書きされてしまうからです。 ・ 次の関数は修正するのではなくそのまま登録です。（たとえば、A.js,B.jsのどちらか） function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); // Firefox等 }catch(e){ elm.attachEvent("on"+listener,fn); // IE用 } } ＞＞＞ 上の関数の中にどのように記述をすれば良いのかわかりません。 つまりこの関数は登録し利用するだけで言い訳です。 ＞＞＞ addEventListenerという機能を利用して、イベントに対しての命令を上書きではなく追加していく為の関数になります。 ここで上の2.が利用されているのがわかります。 ・ 後は window.onload = function() { } はどちらも削除して（より正確には、下の２つの関数に変更して）、addEvent()を利用するだけです。 //A.js function eventA() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js function eventB() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } //A.js または B.js addEvent(window,"load",eventA); addEvent(window,"load",eventB); 確認はしていませんが,この２つは B.jsの最後以降に記述すれば間違いはありません。
その他の回答 (3)
- auty
- ベストアンサー率58% (284/486)
その通りでよいはずですが、この場合、 ＞＞＞ 例えば、A.jsに関数を記述し、B.jsにaddEventを記述した場合、 ではなくて、 例えば、A.jsにaddEvent()と関数を記述し、B.jsに関数と２つのと実行コマンド addEvent(window,"load",eventA); addEvent(window,"load",eventB); を記述した場合、 ですね。
お礼
autyさん その通りでした。失礼しました。 問題なく動作しました。 初心者にも分かりやすく教えて頂きありがとうございました。 これから少しずつjavascriptを勉強していきたいと思います。 以下に動作したコードを載せておきます。 //A.js function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } function A() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js function B() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } addEvent(window,"load",A); addEvent(window,"load",B);
- Dumper
- ベストアンサー率28% (24/84)
後から読まれるB.jsの方で //B.js var preOnload = window.onload; window.onload = function() { if(preOnload){ preOnload() } prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } で試してみてください。
お礼
Dumperさんの書かれた通りに記述したら、両方とも実行できました。 ありがとうございます。
- SAYKA
- ベストアンサー率34% (944/2776)
普通のオブジェクトの場合 x = a; x = b; 結果(つまりx)はbだよね？ それが判ったら次は window.onload = function(){/*a*/}; window.onload = function()[/*b*/}; 結果(つまりwindow.onload)は・・・・・
補足
結果は、bが実行されるということ・・・でしょうか。
補足
ご回答ありがとうございます。解説までして頂き勉強になります。 ＞＞＞次の関数は修正するのではなくそのまま登録です。（たとえば、A.js,B.jsのどちらか） 登録というのはそのまま関数を記述すればいいのでしょうか。 例えば、A.jsに関数を記述し、B.jsにaddEventを記述した場合、 //A.js function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); // Firefox等 }catch(e){ elm.attachEvent("on"+listener,fn); // IE用 } } function eventA() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js function eventB() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } addEvent(window,"load",eventA); addEvent(window,"load",eventB); という記述になるのでしょうか。