JavaScript イベントリスナーの実行タイミングを理解したい

Question

質問事項

JavaScript初学者です。
addEventListenerにて定義した処理（イベントリスナー）の実行タイミングを理解しようと以下のコードを実行したのですが、実行結果が想定と異なりました。原因はなんでしょうか。。。

該当のソースコード

document.getElementById("btn").addEventListener("click",function () {
        var xhr = new XMLHttpRequest();

        xhr.addEventListener("readystatechange",function () {
          console.log("readyState：" + xhr.readyState);
        },false)

        console.log("1.Open前");
        xhr.open("GET", "scripts/book.xml");
        console.log("2.Open後,Send前");
        xhr.send(null);
        console.log("3.Send後");

      },
      false
    );

・ボタン押下時にXMLHttpRequestを実行
・XHLHttpRequestのreadystateが変化したタイミングでイベント実行

想定した結果

イベント発火によるイベントリスナーはsetTimeoutのように、WebAPIによってタスクキューに入ってからコールスタックに入ると理解しているので、イベントリスナーは最後に行われると思ってました。

1.Open前
2.Open後,Send前
3.Send後
readyState：1　　　　　　＜＝Openの時のイベント処理
readyState：2
readyState：3
readyState：4

実際の結果

実際には、同期処理である「console.log("2.Open後,Send前");」の処理よりも先に、Openによるイベントリスナーが動作しています。

1.Open前
redyState：1　　　　　　＜＝Openの時のイベント処理
2.Open後,Send前
3.Send後
redyState：2
redyState：3
redyState：4

Answer 1

イベントリスナはイベントが発行されたときに同期的に実行されます。なので、イベント発行が同期か非同期かを考える必要があります。

ウェブプラットフォームにおけるイベントは、同期的に発行されるように見えるものと非同期的に発行されるように見えるものがあります。MDN にも同期か非同期かはほぼ書いてないと思うので、もし知りたい場合は規格書を読む必要があります。

readystatechangeイベントの場合は、XHR規格の中で「Fire an event named readystatechange ...」と何箇所かで書かれています。この「Fire an event」は同期的に発行するという意味です。しかしながらこのフレーズがあるからといってプログラマから見て必ず同期的というわけでもなく、何らかの非同期なタスクの中で同期的にイベントを発行していればプログラマから見て非同期的です。

例えば toggle イベントは「2. Fire an event named toggle at the details element.」と書かれていますが、このステップ自体は「queue an element task ... that runs the following steps,」の一部なので非同期に見えるわけです。

Comments

[NayuNayu]

> イベントリスナはイベントが発行されたときに同期的に実行されます。
疑問点の本質をついてくれたような回答です。ガラッと理解が変わりました。

つまりは、XHR.open()ではイベントが同期的に発行され、イベントリスナーも同期的に呼ばれた。
XHR.send()ではイベントがなんらかの非同期処理の中で発行され、イベントリスナーはその非同期処理でイベント発行と同期的に呼ばれる（≒結果的にイベントリスナーは非同期的に実行）ということですね。

ということは、setTimeout等とは異なって、タスクキューは使用しないで即時コールスタックに入るイメージなのでしょうか。。。？

[int32_t]

2段落目、3段落目ともその理解でよいと思います。

Answer 2

@int32_t さんの高評価回答を打ち消すようですが、私は同期/非同期を考慮する必要はないと考えます。
readystatechange イベントが発動するタイミングを決めるのは、何らかの処理上で readystatechange イベントが発火するからです。

• 3.5.1. open() メソッド - XMLHttpRequest Standard （日本語訳）

1. IF［ これ°の状態 ≠ open した ］：

これ°の状態 ← open した
これ°に向けて，名前 readystatechange のイベントを発火する

XMLHttpRequest#open() の処理には「readystatechange イベント発火」が含まれています。

Re: NayuNayu さん

Comments

[NayuNayu]

>readystatechange イベントが発動するタイミングを決めるのは、何らかの処理上でreadystatechange イベントが発火するからです
やはり「イベント発火＝イベントリスナー実行」ということですね。
その理解の上でリファレンスをみると、確かにと納得できました。
※リファレンスみると、＠FromMZ150 さんの通り実行すると「redyState：2、redyState：3」がコンソールに出ない理由であったりが理解できました

@int32_t さんの回答と合わせて、より理解が深まりました。ありがとうございます

Answer 3

実行結果が想定と異なった原因は、

同期にしたくて、false をつけた位置が間違っているから。
addEventListener の後ろにつけるのではなく、
xhr.open のところにつけて試してみてください。

Comments

[NayuNayu]

同期にしたいわけではなく、イベントリスナーの実行タイミングを知りたいという質問でした。
ただ、OpenにFalseとして同期にしてみるとredyState：2、redyState：3がコンソールに出ないという初めてみる挙動をしたので、楽しめましたありがとうございます。

Answer 4

「実際の結果」は特におかしくないです。

【XMLHttpRequest.readyState - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/readyState#example

Comments

[NayuNayu]

MDNリファレンスの連携ありがとうございます。
ただ、深堀しすぎかもですが、なぜそうなるのか？が知りたいことでした。。。