JavaScript

What is the addEventListener method in JavaScript.

In JavaScript, an event is an action that occurs on a webpage. This action can be anything from clicking of a button to loading of the page. Several events can occur simultaneously and can be initiated by either the user or the browser. To manage these events, event handlers are required. When an event occurs inside a browser it alerts the system which can then handle (respond to) these events.

In this post we will have a detailed discussion on the AddEventListener() method in JavaScript and how we can use it to capture and handle events.

What is AddEventListener() in JavaScript

JavaScript provides us with the addEventListener() method, which is an inbuilt function which can be used to specify a function which will be executed in case a particular event is triggered.

Syntax

target_element.addEventListener(event, function, useCapture)

target_element: This is the HTML element to which we want to attach the event handler.

Parameters are:

  • event: It’s a valid JavaScript event that is written without the ‘on’ prefix. For example, ‘click’ is written instead of ‘onClick’. The function executes once this event occurs.
  • function: This function is a listener that is executed in response to a triggered event.
  • useCapture: It’s an optional Boolean value which decides which event type to use (event bubbling or event capturing).

What are Event Bubbling and Event Capturing

The third optional Boolean parameter, useCapture, determines the event propagation, which decides the sequence of occurrence of an event.

If there’s <p> element inside a <div> element and the user clicks on the <p> element, which of the event of click should occur first?

In bubbling, which is represented by false, the sequence of occurrence goes from inner to outer. The <p> tag will be handled first and then the <div> tag.

Whereas, for capturing, that’s represented through true, the outermost event is handled first before the inner element. First, <div> will be handled and then the <p> tag.

Example

Here, two parameters are passed. By clicking the button the function is called that displays the text:

<body>
    <button id="try">Click here</button>
    <h1 id="text"></h1>
    <script>
    document.getElementById("try").addEventListener("click",   function(){
    document.getElementById("text").innerText = "Welcome Back"; });
    </script>
</body>

Conclusion

The addEventListener method in JavaScript allows you to capture events and then execute the specified function based on the event that has occurred. It takes three parameters; one of which is optional. The third (optional) parameter, useCapture, is a Boolean parameter that decides the sequence of the events that is occurring. In this post we have had a comprehensive discussion on what is the addEventListener() method and how to effectively use it in our JavaScript code.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.