イベントハンドラの記述の仕方による実行の違い

JavaScriptの一部で、styleのアトリビュートで、displayがnoneとなっている時となっていない時でメッセージの表示を変えるという処理を書きました。

JavaScript
1    function pic_status(){
2        var ma = $("#message-area:first").find("span");
3        if (pic_style === "none"){
4            ma.text("the pic is hidden");
5        }else{
6            ma.text("the pic is shown");
7        }
8    }
9    window.onload = pic_status();

この最後の行の

JavaScript
1window.onload = pic_status();

というようにイベントハンドラを書いた場合にはページを読み込んだ際に判別して表示を変えてくれます。
ただし

JavaScript
1window.onload = function(){
2    pic_status();
3}

や

JavaScript
1window.addEventListener("load", function(){
2    pic_status();
3)}

などと記述した場合には、ページの読み込み時は表示を変えてくれず、どこかのボタンを押すなどした時にやっと反応します。

イベントハンドラの記述の仕方で挙動が異なるのはどういうことなのでしょうか？
よろしくお願いいたします。

HTMLソースコード
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>JS勉強</title>
6        <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
7        <link rel="stylesheet" type="text/css" href="./bootstrap/bootstrap-4.3.1-dist/css/bootstrap.min.css">
8        <script src="../js-jq/jquery-3.4.1.min.js"></script>
9        <script src="../js-jq/myjs.js"></script>
10    </head>
11    <body>
12        <header>
13            <h1>JavaScript</h1>
14        </header>
15        <div id="main" class="container">
16        <div id="area51">
17            <div id="changeable-area">
18                <div id="text-area">
19                    <span>something</span>
20                </div>
21            </div>
22        </div>
23        <div id="button-wrapper"><button id="trigger-button">TRIGGER</button></div>
24        <div id="message-area">
25            <span>some messages are written in this area.</span>
26        </div>
27        <p class="button-area"><button id="pic-button">PIC</button></p>
28        <div class="pictures">
29            <img src="../images/test1.jpg">
30        </div>
31        </div>
32    </body>
33    <footer>I'm learning JavaScript.</footer>
34</html>

CSS
1*{
2    margin:0; padding:0;
3}
4
5#pics img{
6    width: 300px;
7}
8body{
9    text-align: center;
10}
11footer{
12    text-align: center;
13    height: 50px;
14    line-height: 50px;
15    color: whitesmoke;
16    background-color: cornflowerblue;
17    font-weight: bold;
18    margin-top: 15px;
19}
20header{
21    height: 60px;
22    color: whitesmoke;
23    background-color: #333333;
24    line-height: 60px;
25    margin-bottom: 15px;
26}
27header h1{
28    margin-left: 10px;
29}
30#trigger-button{
31    border-radius: 3px;
32}
33#area51{}
34
35#changeable-area{
36    width: 100%;
37    height: 250px;
38    border: solid 1px #333333;
39    margin: 0 auto;
40    font-size: 20px;
41    font-weight: bold;
42    border-radius: 4px;
43    text-align: center;
44}
45#text-area{
46    padding: 5px 15px 30px 15px;
47}
48#message-area{
49    height: 50px;
50    border: solid 1px #333333;
51    border-radius: 4px;
52    text-align: center;
53    width: 60%;
54    margin: 0 auto;
55    overflow: auto;
56}
57#message-area span{
58    font-weight: bold;
59    font-size: 13px;
60}
61
62#text-area{
63    height: 250px;
64    word-break: break-all;
65    margin: 0 auto;
66    overflow: auto;
67}
68#trigger-button{
69    margin: 0 10px;
70    width: 80px;
71    line-height: 25px;
72    border-radius: 3px;
73}
74#button-wrapper{
75    text-align: center;
76    margin: 10px 0;
77}
78.pictures{
79    margin: 0 auto;
80    width: 640px;
81}
82#pic-button{
83    width: 50px;
84    border-radius: 4px;
85}
86.button-area{
87    text-align: center;
88    margin-top: 10px;
89}

JavaScript
1$(document).ready(function(){
2    function pic_status(){
3        var ma = $("#message-area:first").find("span");
4        if (pic_style === "none"){
5            ma.text("the pic is hidden");
6        }else{
7            ma.text("the pic is shown");
8        }
9    }
10    window.onload = pic_status();
11
12    $("#trigger-button").click(function(){
13        $("#text-area").prepend("<span>a text was created. </span>");
14    })
15
16
17    var pics = $(".pictures");
18    var pb = $("#pic-button");
19    var pic_style;
20    pb.click(function(){
21        pics.toggle();
22        pic_style = pics.css("display");
23        pic_status();
24    })
25
26
27})

m.ts10806

2019/05/20 15:01

再現可能なようにHTMLとjsの記述もあわせてご提示いただけますか？

keip

2019/05/20 15:13

ありがとうございます。ソースコードを貼りました。よろしくお願いします。

行動規範の内容に同意します

回答2件

window.onload

エラーの原因はSyntaxErrorかと思いますが、関数呼び出しと関数オブジェクトの違いを意識する事から始めると良いように思います。

JavaScript
1window.onload = pic_status();

関数名に () を付けるという事は関数pic_statusをその場で実行するということです。
関数pic_statusの返り値は undefined ですので、このコードは下記コードと等価です。

JavaScript
1pic_status();
2window.onload = undefined; // 関数pic_statusの返り値 undefined を代入する

window.onload には undefined が代入されますので、onloadのタイミングでは何も発生しません。
質問者さんな無名関数式を使って、この問題を解いたようですが、もっと簡潔な方法があります。

JavaScript
1window.onload = pic_status; // 関数オブジェクト pic_status を代入する

window.onload には関数オブジェクトを代入しなければなりませんので、関数pic_statusをそのまま代入すれば良いのです。

window.addEventListener

addEventListenerもonloadと同様の書き方が可能です。

JavaScript
1window.addEventListener('load', pic_status, false); // 関数オブジェクト pic_status を第二引数に指定する

addEventListenerは第三引数を省略可能ですが、後方互換性の為に明示的に指定する事をお勧めします。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

$(document).ready()

JavaScript
1$(document).ready(function(){
2    // 中略
3});

このコードは DOMContentLoaded とほぼ同じタイミングで発動します(等価ではありません。
DOM構築完了が保証されているので、そもそも論でいえば、loadイベントで待つ必要はありません。
https://api.jquery.com/ready/

Re: keip さん

投稿2019/05/20 23:42

編集2019/05/20 23:44

think49

総合スコア18162

keip

2019/05/21 02:03

think49さんありがとうございます。なるほど、window.onload = pic_status();はそういうことになっているのですね。なるほど、$(document).ready()はloadでイベントを待つ必要はないのですね。勉強になりました。ありがとうございました。

x_x

2019/05/21 03:18

addEventListener の第三引数の話は Firefox 5 のことでしょうか？ jQuery 2.2 から内部的に第三引数を指定しなくなっていますし、あまり気にしても仕方ないかなと思いました。

行動規範の内容に同意します

こちらのコードが動作しないのは
書き方が間違っているからです。

javascript
1window.addEventListener("load", function(){
2  pic_status();
3)}

正しくは)}ではなく})です。

javascript
1window.addEventListener("load", function(){
2  pic_status();
3})

もう一方のこちらは書き方は間違っておらず
私の方で動作が確認できたため
動作しないというのは勘違いです。

javascript
1window.onload = function(){
2  pic_status();
3}

余談ですがfooterタグがbodyタグの外側にあるため
正しく内側に記述しましょう。

投稿2019/05/20 22:09

yasutomi

総合スコア2937

keip

2019/05/21 02:04 編集

yasutomiさんありがとうございます。 addEvetListenerの方は書き方が間違っていたんですね。 window.onload = function(){ pic_status(); } の方をもう一度試してみましたが、やはりページ読み込み時に実行してくれませんでした。ローカルで開発しているのが原因とかあるのでしょうか。 footerタグはbodyの中に書くのですね。そこは完全に外に書くものであると勘違いしていました。訂正していただき感謝いたします。

yasutomi

2019/05/21 02:26 編集

どちらにしろwindow.onloadという書き方は現在はほとんど使用されないのでthink49さんも説明されていますが window.addEventListener('load', pic_status);を使用したほうが良いでしょう。後方互換性の為にfalseが必要と書かれてありましたが、現在はIE11で省略しても動作するため、省略して問題ないです。

keip

2019/05/21 02:37

そうなんですね。window.onloadというイベントハンドラの書き方よりもaddEventListenerの方がよいのですね。追加情報ありがとうございます。

行動規範の内容に同意します

あなたの回答