Open In App

HTML DOM onopen Event

Last Updated : 15 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The DOM onopen event occurs on an open connection with an event source. 

Related events:

  • onmessage: Received the message.
  • onerror: The problem occurs.

Syntax:

  • Using JavaScript:
object.onopen = function(){myScript};
  • Using the addEventListener() method:
object.addEventListener("open", myScript); 

Example: Using the addEventListener() method 

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>
        HTML DOM onopen Event
    </title>
</head>
 
<body>
    <h1 id="gfg"></h1>
    <div id="geeks"></div>
   
    <script>
        if (typeof (EventSource) !== "undefined") {
            let source = new EventSource("/html/demo_sse.php");
            source.addEventListener("open", function () {
                document.getElementById("gfg").innerHTML =
                    "GeeksforGeeks";
            });
            source.addEventListener("message", function (event) {
                document.getElementById("geeks").innerHTML +=
                    event.data + "<br>";
            });
        } else {
            document.getElementById("gfg").innerHTML =
                "Browser does not support";
        }
    </script>
</body>
 
</html>


Output:

  

Supported Browsers: The browsers supported by HTML DOM onopen Event are listed below:

  • Google Chrome 9.0
  • Firefox 6.0
  • Apple Safari 5.0
  • Opera 11.0

Similar Reads

HTML DOM fullscreenerror Event
The HTML DOM fullscreenerror event occurs when an element can not be viewed in full-screen mode, even if it has been requested. Use the element.requestFullscreen() method to view an element in fullscreen mode and the element.exitFullscreen() method to cancel fullscreen mode. Supported Tags It supports all HTML elements. Syntax: In HTML: &lt;element
1 min read
HTML | DOM onvolumechange Event
The onvolumechange event in HTML DOM occurs when the media volume is changed. Use volume property to set/return the volume of the media.This event is invoked by: Volume increasing/decreasingMuting/unmuting the media player Supported Tags &lt;audio&gt;&lt;video&gt; Syntax: In HTML: &lt;element onvolumechange="myScript"&gt;In JavaScript: object.onvol
1 min read
HTML DOM ondragleave Event
The ondragleave event occurs when a draggable element or text selection leaves a valid drop target. The ondragenter and ondragleave events can help the user to understand dropzone.There are some events that are used and occurred in the different stages of a drag and drop operation: ondragstart: occurs when dragging of an element started.ondrag: occ
3 min read
HTML DOM onpaste Event
The HTML DOM onpaste event occurs when some content is pasted in an element. this event works on every element like in &lt;p&gt; element if contenteditable set is true then we can paste content in &lt;p&gt; element. The HTML DOM onpaste event is mostly used in input element type="text". Supported Tags: It supports all HTML Elements. Syntax: In HTML
1 min read
HTML | DOM touchcancel Event
The touchcancel event is used to execute a script when the touch event gets interrupted. It is considered a good practice to include the touchcancel event to clean up the code if the devices interrupt a touch event at different actions.Supported Tags All HTML elements supported by this event. Supported Tags &lt;details&gt; Syntax: object.ontouchcan
1 min read
HTML | DOM touchmove Event
The touchmove event is used to execute a script when the user moves the finger across the screen. It works only on touch screen devices and triggers once for every movement and continues to trigger until the finger is released.Supported Tags All HTML elements supported by this event. Syntax: object.ontouchmove = myScript; Below program illustrates
1 min read
HTML | DOM Storage Event
The Storage Event in HTML DOM is used to make change in the storage area in the context of another document. When there is modification in the storage area of the window, a storage event is sent to that window. Syntax: window.addEventListener("storage", script) Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;
1 min read
HTML DOM createEvent() Event Method
The createEvent() method in HTML creates an event object of the specified type. The created event must be initialized before use. Syntax: document.createEvent(event_type) event_type: It is the required parameter and is used to specify the type of event. There are many types of events which are listed below: Example: Below program illustrates the cr
1 min read
HTML | DOM touchend Event
The touchend event is used to execute a script when a user removes his finger from an element. It will only work on devices with a touch screen. Supported Tags All HTML element supported by this event. Syntax: object.ontouchend = myScript; Below program illustrates the touchend event : Example-1: Executing a JavaScript when the user releases the to
1 min read
HTML | DOM timeStamp Event Property
The timeStamp Event property is used to get the timestamp of when a particular event is created. It basically returns the difference in time (in milliseconds) between the time of event created by the browser and January 1, 1970. It is a read-only property. Syntax: event.timeStamp Return Value: : This event returns the number of milliseconds since J
1 min read