# state-change

{% tabs %}
{% tab title="window" %}
{% hint style="info" %}
<mark style="color:yellow;">**state-change**</mark>**&#x20;events**

* "<mark style="color:purple;">`load`</mark>" (on [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window))
* "<mark style="color:purple;">`online`</mark>", "<mark style="color:purple;">`offline`</mark>" (on [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window)): network connectivity
* "[<mark style="color:purple;">`popstate`</mark>](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event)" (on [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window)): browser’s <mark style="color:yellow;">**Back**</mark> button clicked.
{% endhint %}
{% endtab %}

{% tab title="document" %}
{% hint style="info" %}
<mark style="color:yellow;">**state-change**</mark>**&#x20;events**

* "[<mark style="color:purple;">`DOMContentLoaded`</mark>](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)" (on [document](../../dom/type/document "mention"))
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* [client-side-javascript-timeline](../client-side-javascript-timeline "mention")
{% endtab %}
{% endtabs %}
