JavaScript and JQuery Essentials Trainin... (56 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (28 Blogs)
  • jQuery UI Development (2 Blogs)
  • The Complete WebDeveloper (38 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

How to Implement addEventListener() Method in JavaScript?

Published on Sep 12,2019 325 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.

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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.

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

 

Syntax:

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

   

 

 

Parameter Values

ParameterDescription

event

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.

function

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.

useCapture

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>
<html>
<body>
<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">
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

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 on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

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

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
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.