Javascript DOM- Event Listeners

You can use the addEventListener() method, the JavaScript is separated from the HTML markup elements, and for better readability. Allows you to add event listeners even when you do not control the HTML markup elements.

Syntax:

element.addEventListener(event, function, useCapture);

Adding Event Listeners for Different Event Types:

you can assign different event listeners to different event types on the same element(“click”, “mouseover”, and “mouseout” events ).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Attaching Different Event Listeners to Different Event Types</title>
</head>
<body>
  <button id="myBtn">Click Me</button>

  <script>
  // Selecting button element
  var btn = document.getElementById("myBtn");

  // Defining custom functions
  function sayHello() {
    alert("Hi, how are you doing?");
  }

  function setHoverColor() {
    btn.style.background = "yellow";
  }

  function setNormalColor() {
    btn.style.background = "";
  }

  // Assigning event listeners to the button
  btn.addEventListener("click", sayHello);
  btn.addEventListener("mouseover", setHoverColor);
  btn.addEventListener("mouseout", setNormalColor);
  </script>
</body>
</html>

OUTPUT:

Adding Event Listeners to Window Object:

The addEventListener() method provides to add event listeners to any HTML DOM elements, the document object, the window object, or any other object that supports events.

E.g, XMLHttpRequest object.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Adding Event Listener to the Window Resize Event</title>
</head>
<body>
  <div id="result"></div>

  <script>
  // Defining event listener function
  function displayWindowSize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var size = "Width: " + w + ", " + "Height: " + h;
    document.getElementById("result").innerHTML = size;
  }

  // Attaching the event listener function to window's resize event
  window.addEventListener("resize", displayWindowSize);
  </script>
  <p><strong>Note:</strong> Please resize the browser window to see how it works.</p>
</body>
</html>

OUTPUT:

Width: 675, Height: 485
Note: Please resize the browser window to see how it works.

Removing Event Listeners:

removeEventListener() method to remove an event listener.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Removing an Event Listener</title>
</head>
<body>
  <button id="myBtn">Click Me</button>

  <script>
  // Defining function
  function greetWorld() {
    alert("Hello World!");
  }

  // Selecting button element
  var btn = document.getElementById("myBtn");

  // Attaching event listener
  btn.addEventListener("click", greetWorld);

  // Removing event listener
  btn.removeEventListener("click", greetWorld);
  </script>
        <p><strong>Note:</strong> If you click the "Click Me" button nothing will happen, since event listener is removed.</p>
</body>
</html>

OUTPUT: