JavaScript Event Listeners Tutorial

What are Event Listeners?

Event listeners are functions that are triggered when a specific event occurs.
They are used to add interactivity to web pages and mobile apps.
Event listeners can be attached to any HTML element, the document object, or the window object.

addEventListener(type, listener, options)

Adds an event listener to the specified target for the specified event type. The listener can be a function or an object that implements the EventListener interface.
The options object can be used to specify additional options for the event listener, such as whether it should be captured or bubbled.

<button onclick="myFunction()">Click Me!</button>

<script>
function myFunction() {
    alert("You clicked the button!");
}

// Add an event listener to the button element for the click event
document.querySelector("button").addEventListener("click", myFunction);
</script>

removeEventListener(type, listener, options)

Removes an event listener from the specified target for the specified event type.
The listener must be the same function or object that was passed to the addEventListener() method.
The options object must also be the same object that was passed to the addEventListener() method, or null.

<button onclick="myFunction()">Click Me!</button>

<script>
function myFunction() {
    alert("You clicked the button!");
}

// Add an event listener to the button element for the click event
document.querySelector("button").addEventListener("click", myFunction);

// Remove the event listener from the button element
document.querySelector("button").removeEventListener("click", myFunction);
</script>

dispatchEvent(event)

Dispatches an event to the specified target. The event can be a custom event or a standard DOM event.

<button onclick="dispatchEvent(new CustomEvent('my-event'))">Click Me!</button>

    <script>
window.addEventListener("my-event", function(event) {
    alert("The my-event event was dispatched!");
});

// Dispatch the my-event event
document.querySelector("button").dispatchEvent(new CustomEvent('my-event'));
</script>

onclick

Triggered when an element is clicked.

<button onclick="myFunction()">Click Me!</button>

<script>
function myFunction() {
    alert("You clicked the button!");
}
</script>

This example creates a button element with the onclick() event listener attached to it. When the user clicks on the button, the myFunction() function is called.

ondblclick()

Triggered when an element is double-clicked.

<p ondblclick="myFunction()">Double-click me!</p>

<script>
    function myFunction() {
        alert("You double-clicked the paragraph!");
    }
</script>

This example creates a paragraph element with the ondblclick() event listener attached to it. When the user double-clicks on the paragraph, the myFunction() function is called.

Some Other Event Listeners

onabort(): Triggered when an asynchronous operation is aborted.
onblur(): Triggered when an element loses focus.
onchange(): Triggered when the value of an element changes.
onclick(): Triggered when an element is clicked.
ondblclick(): Triggered when an element is double-clicked.
onfocus(): Triggered when an element gains focus.
oninput(): Triggered when the value of an element changes.
onkeydown(): Triggered when a key is pressed down.
onkeypress(): Triggered when a key is pressed and released.
onkeyup(): Triggered when a key is released.
onload(): Triggered when a resource (such as an image or script) has finished loading.
onmousedown(): Triggered when a mouse button is pressed down.
onmousemove(): Triggered when the mouse is moved.
onmouseout(): Triggered when the mouse cursor leaves an element.
onmouseover(): Triggered when the mouse cursor enters an element.
onmouseup(): Triggered when a mouse button is released.
onreset(): Triggered when a form is reset.
onscroll(): Triggered when an element is scrolled.
onsubmit(): Triggered when a form is submitted.
onunload(): Triggered when a page is unloaded.

Previous Next