What is event Listener in javascript?

Rumman Ansari   Software Engineer   2023-03-26   159 Share
☰ Table of Contents

Table of Content:

An event listener is a function in JavaScript that is attached to an event on an element in a webpage. When the event is triggered, the listener function is executed. This allows you to specify the actions that should be taken when a particular event occurs on an element, such as a button click or a form submission.

For example, you can use an event listener to execute a function when a button is clicked:


document.getElementById("myButton").addEventListener("click", myFunction);

In this example, the function myFunction is attached as an event listener to the "click" event on the button with the ID "myButton". When the button is clicked, the function will be executed.

Event listeners are a powerful tool for creating interactive and dynamic webpages. They can be attached to a wide range of events on different elements, such as mouse clicks, keyboard input, form submissions, and more.

Example of Click event Listener in javascript

Here is an example of using an event listener to execute a function when a button is clicked in JavaScript:


<button id="myButton">Click me!</button>

<script>
  // Define the function to be executed when the button is clicked
  function buttonClicked() {
    alert("Button was clicked!");
  }

  // Attach the function as an event listener to the "click" event on the button
  document.getElementById("myButton").addEventListener("click", buttonClicked);
</script>

In this example, the function buttonClicked is defined and is attached as an event listener to the "click" event on the button with the ID "myButton". When the button is clicked, the function will be executed and an alert message will be displayed.

Event listeners can be attached to any element in a webpage, and they can be triggered by a wide range of events, such as mouse clicks, keyboard input, form submissions, and more.

Full Code. You can copy it and use it. 


<!DOCTYPE html>
<html>
<body> 
 <h2>Example of Click event Listener in javascript</h2> 
 <button id="myButton">Click me!</button> 
</body>
</html>  

<script>
  // Define the function to be executed when the button is clicked
  function buttonClicked() {
    alert("Button was clicked!");
  }

  // Attach the function as an event listener to the "click" event on the button
  document.getElementById("myButton").addEventListener("click", buttonClicked);
</script>
‹ Previous -   exit fullscreen
Next › -   Function Introduction