DEV Community

Ngan Kim Khong
Ngan Kim Khong

Posted on

4 3

addEventListener method

The addEventListener() method attaches an event handler to the specified element. Whenever the specified event is delivered to the target element,
the method addEventListener() sets up a function that will be called.

Basically, in an abstract way of saying, the server is just doing its things until the user (a human) interact with it by clicking something on-screen, pressing a button on the keyboard, or they could do anything that a computer is programmed to recognize.

Syntax:
target.addEventListener(event, function, useCapture);

Parameter:
type: Required. A STRING that specifies the name of the event.
You can find more event name as string here:
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.

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

Example:

You can add events of different types to the same element, in this case, the button.
document.getElementById("myButton").addEventListener("mouseover", myFunction);
document.getElementById("myButton").addEventListener("click", someOtherFunction);
document.getElementById("myButton").addEventListener("mouseout", someOtherFunction);

Using the optional useCapture parameter to show the difference between bubbling and capturing:
document.getElementById("myDiv").addEventListener("click", myFunction, false);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

In this case, only the "true" value from useCapture can be run.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up