Skip to content
Advertisements

JavaScript addEventListener()

Why addEventListener ?

Sometimes, when you create a web page, you may want to execute a piece of code when someone triggers a particular type of activity on your website. With the Javascript addEventListener method, you can do it quickly and easily.

The addEventListener () method adds an event handler to the specified item. When this event occurs, the listener function is executed. This method does not return a value.

Tip: Use the removeEventListener () method to remove an event handler that is added to the addEventListener () method.

Tip: Use the document.addEventListener () method to add an event handler to the document.

Syntax:

element.addEventListener(event, function, useCapture)

  • event: The event type (such as “click” or “mousedown”).

Note: Do not use the ‘on’ prefix. For example: Use ‘click’ instead of ‘onclick’.

  • function: The function that is called after the event is triggered.
  • useCapture: The third parameter is a Boolean value that describes whether the event is bubbling or trapping. This parameter is optional.

true: The event handler is executed during the capture phase.
false: Default. The event handler is executed in the bubble stage.

When transmitting parameter values, you can use the “anonymous function” to call the function parameters:

        element.addEventListener("click", function () {

            alert("Hello JavaScript");
        });

Add Event Handler to an Item

You can refer to an external “named” function.

            alert("Hello JavaScript");
        }

        var button = document.getElementById('btn');

        button.addEventListener('click', hi);

In the AddEventListener method, you can add multiple different listener functions to the same event of the current object. These functions are triggered in the order they are added. If you add the same listener function multiple times for the same event, the function is applied only once, and the additions are removed automatically (you will not have to remove them manually using the removeEventListener method).

        function hi() {
            console.log("Hello JavaScript");
        }

        document.addEventListener("click", hi);
        document.addEventListener("click", hi);
        / * Click on the web page * /

Running the above code will only have one Hello JavaScript script when you click on the document.

You can add multiple events to the same item without overwriting the existing item.

This example shows how to add two clicks to a document:

    document.addEventListener ("click", myFunction); 
    document.addEventListener ("click", someOtherFunction);


Add Multiple Event Handlers to the Same Item

The AddEventListener () method allows you to add multiple events to the same item without overwriting existing events:

This example shows how to add many events to the same element:

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
 
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
 
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

Add an event handler to the window object

The AddEventListener () method lets you add event listeners to any HTML DOM object, such as HTML elements, HTML document, a window object, or other objects that support events, such as an xmlHttpRequest object.

Add an event listener that triggers when a user resizes the window:

    <p id="demo"></p>

    <script>

        window.addEventListener("resize", function () {
            document.getElementById("demo").innerHTML = Math.random();
        });

    </script>

Transition parameters

When transmitting the parameter values, use an “anonymous function” that calls the specified function parameters:

    <button id="myBtn">CLICK</button>
    <p id="demo"></p>

    <script>

        var num1 = 7;
        var num2 = 9;
        document.getElementById("myBtn").addEventListener("click", function() {
            myFunction(num1, num2);
        });
 
        function myFunction(num1, num2) {
            var result = num1 * num2;
            document.getElementById("demo").innerHTML = result;
        }

    </script>

Event Bubbling or Event Capture?

HTML Dom has two activities for bubbling and capture. Event propagation is a way of defining element order when an event occurs. If you have a “p” element in “Div” and a user clicks “p”, which element should “click” activity be addressed first?

Bubling “p” The click event of the element is handled first, then the click event of the “div” element is handled; ie the event in the inner item is taken first and then the outside.
The capture is handled in the external element event first, and then the internal: click event of the “div” element is handled first, the “p” element will handle the last click event.

With the AddEventListener () method, you can specify the type of propagation using the “useCapture” parameter:

element.addEventListener(event, function , useCapture)

  • The default value is false; this value uses bubble propagation, it uses event capture propagation when the value is set to true.
var x = document.getElementById("testP")
 
x.addEventListener("click", testFunction, true);
 
var x1 = document.getElementById("testDiv")
 
x1.addEventListener("click", testFunction, true);

RemoveEventListener () Method

The RemoveEventListener () method removes event handlers that are added with the addEventListener () method:

element.removeEventListener("mousemove", testFunction);

the difference between addEventListener and other event listeners

  • The AddEventListener () method adds an event handler to an item without overwriting existing event handlers.
  • You can add many event handlers to a single item.
  • You can add multiple event handlers of the same type to an item, that is, two “click” events.
  • You can add event listeners to any DOM object, not just HTML elements. Like an example window object.
  • The AddEventListener () method makes it easy to control how the event responds to bubbling.
  • When using the AddEventListener () method, JavaScript leaves HTML markup for better readability and lets you add event listeners even when you don’t check HTML markup.
  • You can easily remove an event listener by using the RemoveEventListener () method.

addEventListener Examples —> CLICK

Advertisements

1 Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: