Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM addEventListener() Method

  • Last Updated : 24 Jul, 2019

The addEventListener() method attaches an event handler to the specified element.


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():


<!DOCTYPE html>
    <title>DOM Location host Property</title>
        h1 {
            color: green;
        h2 {
            font-family: Impact;
        body {
            text-align: center;
    <h2>addEventListener() method</h2>
     This example uses the addEventListener() 
     method to add many events on the same 
    <button id="myBtn">Try it</button>
    <p id="demo"></p>
        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>"
   = "red"
        function mySecondFunction() {
            document.getElementById("demo").innerHTML += "Clicked!<br>"
        function myThirdFunction() {
            document.getElementById("demo").innerHTML += "Moused out!<br>"


  • 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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :