以前良く似た質問をしましたが、また疑問点が出たので質問します。
前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。
var img = new Image();
window.onload = function() {
img.onload = func;
}
function func() {
(省略)
}
その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。
しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。
window.onload = function() {
document.getElementById("result1").onload = result1;
document.getElementById("result2").onload = result2();
}
function result1() {
document.getElementById("result1").innerHTML = "result1";
}
function result2() {
document.getElementById("result2").innerHTML = "result2";
}
<div id="result1"></div>
<div id="result2"></div>
onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか?
あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。
window.onload = function() {
document.getElementById("result1").onload = result1;
document.getElementById("result2").onload = result2();
}
function result1() {
this.innerHTML = "result1";
}
function result2() {
this.innerHTML = "result2";
}
<div id="result1"></div>
<div id="result2"></div>
両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか?
No.1
- 回答日時:
document.getElementById("result1").onload = result1
≒
<div id="result1" onload="result1()"></div>
って意味がないですよね。
(onloadイベントが発生するのって他のリソースを読み込むimgやiframe以外だとページそのものを示すbody(window)だけです。)
イベントが発生しないのでresult1が実行される事もありません。
document.getElementById("result2").onload = result2();
は、()付きですからdivのonloadではなくwindow.onloadでこの行が実行されるときにresult2が実行されます。
function内でのthisについてはよくわかっていないのでパス。
少なくともocument.getElementById("result1")等ではありません。
<input onclick="result1(this)">
などど書くと呼び出したobjectを渡せますが、関数内でthisと書いても呼び出し元のobjectが得られるわけではありません。
No.3
- 回答日時:
やるならこう
<script>
window.onload = function() {
result1();
document.getElementById("result2").func=result2;
document.getElementById("result2").func();
}
function result1() {
document.getElementById("result1").innerHTML = "result1";
}
function result2() {
this.innerHTML = "result2";
}
</script>
<div id="result1">test</div>
<div id="result2">test</div>
resulut1()関数を呼ぶか、オブジェクトにメソッドを設定してから
実行する。
No.4ベストアンサー
- 回答日時:
function func(){
alert('func');
}
これは、funcという名前の関数を「定義」するものです。
そして
func();
と書くと、これはfuncという名前の関数を「実行」します。
ですが、
func
だけでしたら、それは関数を実行するのではなく、「funcという名前の関数を意味する」ということになります。
----------
window.onloadというのは、
windowに対してloadというイベントが発生したときにonloadに指定された関数が実行されます。
----------
window.onload=func;とするとfuncという名前の関数がwindowのloadイベントと同時に「実行」されます。
window.onload=func();とすると
func()はその場で実行して、その戻り値がonloadに入れられます。
(funcにはreturnが明示的に書かれていませんので、undefinedになります)
windowのloadイベントと同時にonloadに入れられたundefinedを「実行」しようとしますが、undefinedは実行できませんから、結局何もしません。
---------------
> function result1() {
> document.getElementById("result1").innerHTML = "result1";
> }
> function result2() {
> document.getElementById("result2").innerHTML = "result2";
> }
この2つの関数は、idがresult1、result2のエレメントのinnerHTMLを書き換える関数を「定義」しているものです。
> window.onload = function() {
> }
これは関数の定義とonloadへの代入を同時にやってるだけですので、説明は不用だと思います。
これによりwindowのloadイベントでこの関数の中身が実行されます。
> window.onload = function() {
> document.getElementById("result1").onload = result1;
> document.getElementById("result2").onload = result2();
> }
2行目のresult2から説明します。
> document.getElementById("result2").onload = result2();
かっこが付いているので、result2という関数を「実行」し、その戻り値をdocument.getElementById("result2")のonloadに代入します。
このときに実行していますから、innerHTMLの書き換えが完了しています。
result2という関数は戻り値はundefinedですから、
document.getElementById("result2")のloadイベントでは何もしないことになります。
1行目、
> document.getElementById("result1").onload = result1;
window.onloadの件で説明した様に、document.getElementById("result1")のloadイベントの時にresult1を実行しなさいと言う指示です。
そこで問題になるのがloadイベントの発生がいつ起きるのか、ということですが、
divエレメントはloadイベントを発生させません。
ですから、いつまで経ってもresult1という関数は実行されないままになります。
(2行目の方もundefinedを代入していますが、実は、それを実行しようともしません)
<img>を使う場合などでも、読み込み完了後(loadイベント発生後)に
onloadを指定しても、すでにloadが完了していますから、それ以上関数が呼び出されることはありません。
window.onloadが早いか、img.onloadが早いからそのときの状況次第でかわります。
onloadに代入するときは、loadイベントが発生する前か後かも注意してください。
---------------
> function result1() {
> this.innerHTML = "result1";
> }
このときのthisはwindowになります。
window.innerHTMLに何かを入れても、通常は目に見える変化はありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP php テーブルが作成できない 1 2022/11/17 23:41
- MySQL php テーブルを作れない 2 2022/11/17 18:22
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- C言語・C++・C# c言語の問題です 3 2023/01/10 16:15
- その他(プログラミング・Web制作) python OpenPyXLを使って出力結果をエクセルに書き込み 2 2022/06/04 19:46
- JavaScript JavaScriptの即時関数の書き方 1 2022/11/29 09:52
- オープンソース Coinmarketcap api 1 2022/05/30 15:47
- PHP php エラー 2 2022/10/23 16:43
- PHP PHP一覧表示した項目にリンクをはりたい 1 2023/07/12 17:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascriptのhtml出力についてa...
-
XMLでのAttributeを持ったNode...
-
DOM要素を削除しても、イベント...
-
excle VBA とweb上の検索を利用...
-
javascript:(function(q, a, z)...
-
showModalDialogで開いた画面を...
-
画像のサイズを動的に変更する
-
価格計算フォーム作成について
-
ブラウザのウィンドウサイズに...
-
FireFoxのjavascriptで自動でキ...
-
デフォルトのリンクの色
-
javaScriptのコードの修正をお...
-
functionから別のfunctionを実...
-
同じIDで定義した要素の配列を...
-
翌月を取得するGASが分かりません
-
ActiveXobjectが作成できない
-
ジェネレーターの作り方
-
関数でy=g(x)のgとは何の略です...
-
google apps scriptの終了のさせ方
-
なぜmatchメソッドがエラーにな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
このjavascriptのif文、条件式...
-
FireFoxのjavascriptで自動でキ...
-
DOM要素を削除しても、イベント...
-
javascriptの基本的なことだと...
-
文字を一文字ずつ表示
-
showModalDialogで開いた画面を...
-
Null またはオブジェクトではあ...
-
Javascriptのhtml出力についてa...
-
codejump 模写コーディングgall...
-
LaTeX:数式を等号揃えにする方法
-
javascriptのdocument.allにつ...
-
excle VBA とweb上の検索を利用...
-
Latexに関する質問です。
-
乗換案内 VBAで操作したい
-
JavaScriptのdocument.all("変...
-
Javascriptで定期的にF5を押す...
-
選択によってsubmitボタンの色...
-
スマホでフォームにフォーカス...
-
compatModeとは?
おすすめ情報