## HTML DOM online Event The `online` event occurs when the browser switches from offline to online mode, indicating that a network connection has been established. --- ## Overview The `online` event is triggered when the browser gains network connectivity and starts working online. * **Opposite Event:** The opposite of the `online` event is the [`offline`](event-onoffline.html) event, which fires when the browser loses its connection. * **Checking Connection Status:** You can also query the current network status at any time using the [`navigator.onLine`](prop-nav-online.html) property, which returns a boolean value (`true` for online, `false` for offline). --- ## Browser Support The numbers in the table specify the first browser version that fully supports this event. | Event | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | `online` | Yes | 8.0 (Deprecated in IE11) | 3.0 | Yes | Yes | *Note: Modern browsers fully support the `online` and `offline` events on the `window` object.* --- ## Syntax You can register this event in HTML or JavaScript using the following syntaxes: ### In HTML ```html ``` *Note: In HTML, the `ononline` attribute is typically placed on the `` element.* ### In JavaScript ```javascript object.ononline = function() { myScript(); }; ``` ### In JavaScript using `addEventListener()` ```javascript object.addEventListener("online", myScript); ``` --- ## Technical Details | Property | Value | | :--- | :--- | | **Bubbles** | No | | **Cancelable** | No | | **Event Type** | Event | | **Supported HTML Tags** | `` (The event is dispatched to the `window` object) | --- ## Code Examples ### Example 1: Using the HTML Attribute This example triggers a JavaScript function when the browser goes online by using the `ononline` attribute on the `` tag. ```html

Toggle your network connection (or simulate offline mode in DevTools) to see the effect.

Current Status: Unknown

``` ### Example 2: Using `addEventListener` (Recommended) Using `addEventListener` on the `window` object is the cleanest and most modern approach to handle network status changes. ```javascript // Listen for the online event window.addEventListener('online', handleConnectionChange); // Listen for the offline event window.addEventListener('offline', handleConnectionChange); function handleConnectionChange(event) { if (navigator.onLine) { console.log("The browser is online. Syncing data..."); // Perform actions like syncing local changes with the server } else { console.log("The browser is offline. Saving data locally..."); // Perform actions like saving user input to LocalStorage } } ``` --- ## Important Considerations 1. **False Positives:** The `navigator.onLine` property and the `online` event only tell you if the device is connected to a local network (e.g., LAN or Wi-Fi). It does not guarantee that the network has actual internet access. A device connected to a router with no internet connection may still report as "online". 2. **Best Practice:** To reliably verify internet connectivity, it is recommended to listen for the `online` event first, and then perform a lightweight "ping" request (such as a `fetch()` request to a reliable endpoint) to confirm actual internet access.