HTML DOM addEventListener() Method Last Updated : 13 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report The addEventListener() method attaches an event handler to the specified element. Syntax: element.addEventListener(event, function, useCapture) Note: The third parameter use capture is usually set to false as it is not used. Below program illustrates the DOM addEventListener(): Example: html <!DOCTYPE html> <html> <head> <title>DOM Location host Property</title> <style> h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>addEventListener() method</h2> <p> This example uses the addEventListener() method to add many events on the same button. </p> <button id="myBtn">Try it</button> <p id="demo"></p> <script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("demo").innerHTML += "Moused over!<br>" this.style.backgroundColor = "red" } function mySecondFunction() { document.getElementById("demo").innerHTML += "Clicked!<br>" } function myThirdFunction() { document.getElementById("demo").innerHTML += "Moused out!<br>" } </script> </body> </html> Output: Initially: Mouse Over Event: Mouse Clicked Event: Mouse Out Event: Supported Browsers: The browser supported by Location host Property are listed below: Google Chrome Internet Explorer Firefox Opera Safari Comment More infoAdvertise with us Next Article HTML DOM customElements define() Method M MayankVandra Follow Improve Article Tags : JavaScript Similar Reads HTML DOM customElements define() Method The customElements define() method is used to define a new custom element. There are two types of custom elements that can be created: Autonomous custom element: These elements do not inherit from built-in HTML elements.Customized built-in element: These elements inherit from built-in HTML elements. 2 min read HTML DOM createDocument() Method The DOMImplementation createDocument() method is used to create and return a Document. Syntax: var doc = document.implementation.createDocument(namespaceURI, qualifiedNameStr, docType); parameters: namespaceURI: It is a DOMString containing the namespace URI of the document to be created, or null if 1 min read HTML DOM createHTMLDocument() Method The DOMImplementation createHTMLDocument() method is used to create a new HTML Document. Syntax: newDoc = document.implementation.createHTMLDocument(title); Parameters: title (Optional): It is a DOMString containing the title to be used for the new HTML document. Return Value: This function returns 1 min read JavaScript addEventListener() with Examples The addEventListener() method is used to attach an event handler to an element in the DOM (Document Object Model). It listens for specific events (such as click, keydown, or submit) on that element and executes a function when the event occurs.Syntaxelement.addEventListener(event, function, useCaptu 9 min read HTML DOM insertAdjacentHTML() Method The DOM insertAdjacentHTML() method is used to insert a text as HTML file to a specified position. This method is used to change or add text as HTML. Syntax : node.insertAdjacentHTML(specify-position, text-to-enter) Return Value : This will return the page with the specified change. There are four l 2 min read HTML DOM open() Method The DOM Open() method in HTML is the combination of the following three steps: Opens an output stream to collect the output.Collects output from the document.write() or document.writeln() methods.Runs the document.close to display the output written to the output stream. Syntax: document.open( MIMEt 2 min read Like