Ask any question about JavaScript here... and get an instant response.

How do event listeners work in the DOM?

Asked on Aug 01, 2025

Answer

Event listeners in the DOM allow you to execute a function when a specific event occurs on an element, such as a click or a keypress. You can add an event listener to an element using the "addEventListener" method.

<!-- BEGIN COPY / PASTE -->
        const button = document.querySelector('button');

        button.addEventListener('click', function() {
            alert('Button was clicked!');
        });
        <!-- END COPY / PASTE -->

Additional Comment:

This example selects a button element and attaches a "click" event listener to it.
When the button is clicked, the function inside "addEventListener" is executed, displaying an alert.
"addEventListener" can be used for various events like "mouseover", "keydown", etc.
It is a good practice to use "addEventListener" instead of inline event attributes for better separation of HTML and JavaScript.

✅ Answered with JavaScript best practices.

Ask any question about JavaScript here... and get an instant response.

How do event listeners work in the DOM?

Asked on Aug 01, 2025

Answer

The Q&A Network