Java/J2EE and SOA (348 Blogs) Become a Certified Professional
AWS Global Infrastructure

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (16 Blogs)
  • Comprehensive Java Course (4 Blogs)
  • Java/J2EE and SOA (345 Blogs)
  • Spring Framework (8 Blogs)

How to Implement addEventListener() Method in JavaScript?

Last updated on Apr 19,2023 19.4K Views

A Data Science Enthusiast with in-hand skills in programming languages such as... A Data Science Enthusiast with in-hand skills in programming languages such as Java & Python.

An event is an important part of JavaScript.A web page responds according to an event that occurred. Some events are user-generated and some are generated by API’s. In this article, we will see how events occur and how the method, addEventListener in JavaScript is used in the following sequence:


What is Event Listener?

An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard.

The addEventListener() is an inbuilt JavaScript function which takes the event to listen for, and a second argument to be called whenever the described event gets fired. Any number of event handlers can be added to a single element without overwriting existing event handlers.


addEventListener() in JavaScript

Some of the features of the event listener method include:

  • The addEventListener() method attaches an event handler to the specified element.
  • This method attaches an event handler to an element without overwriting existing event handlers.
  • You can add many event handlers to one element.
  • You can add many event handlers of the same type to one element, i.e two “click” events.
  • Event listeners can be added to any DOM object not only HTML elements. i.e the window object.
  • The addEventListener() method makes it easier to control how the event reacts to bubbling.

When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup. For more check out this web developer course today.

Also, you can easily remove an event listener by using the removeEventListener() method.



target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]);




Parameter Values



Required. A String that specifies the name of the event.

Note: Do not use the “on” prefix. For example, use “click” instead of “onclick”.

For a list of all HTML DOM events, look at our complete HTML DOM Event Object Reference.


Required. Specifies the function to run when the event occurs. 

When the event occurs, an event object is passed to the function as the first parameter. The type of event object depends on the specified event. For example, the “click” event belongs to the MouseEvent object.


Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase. 

Possible values:true – The event handler is executed in the capturing phasefalse- Default. The event handler is executed in the bubbling phase

Now that you know how an event listener works, let’s take a look at an example of the addEventListener() in JavaScript.


addEventListener() in JavaScript: Example

<!DOCTYPE html>
<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>
<button id="myBtn">Try it</button>
<p id="demo">
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";

addEventListener in JavaScript

With this, we come to an end of this addEventListener in JavaScript. I hope you understood how the event listener method works in JavaScript.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training in Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Check out the Angular Certification by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.

Got a question for us? Please mention it in the comments section of “addEventListener in JavaScript” blog and we will get back to you.

Upcoming Batches For Java Course Online
Course NameDateDetails
Java Course Online

Class Starts on 3rd August,2024

3rd August

SAT&SUN (Weekend Batch)
View Details
Java Course Online

Class Starts on 28th September,2024

28th September

SAT&SUN (Weekend Batch)
View Details

Join the discussion

Browse Categories

webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How to Implement addEventListener() Method in JavaScript?