JavaScript Events

JavaScript events are actions that happen on a web page. For example, when a user clicks a button, types in an input field, submits a form, or moves the mouse, an event occurs.

JavaScript allows us to detect these events and execute code when they happen.

What Are JavaScript Events?

An event is an action that happens in the browser.

Some common JavaScript events are:

• click — when an element is clicked
• mouseover — when the mouse moves over an element
• mouseout — when the mouse leaves an element
• input — when a user enters text
• change — when an input value changes
• submit — when a form is submitted
• keydown — when a keyboard key is pressed
• load — when a page finishes loading

For example, when a user clicks a button, we can display a message.

Adding an Event with JavaScript

Let’s create a simple button:

<button id="myButton">Click Me</button>

Now we can use JavaScript to detect the click:

const button = document.getElementById("myButton");

button.addEventListener("click", function () {
    alert("Button clicked!");
});

When the user clicks the button, an alert will appear.

What is addEventListener()?

addEventListener() is a JavaScript method used to listen for events.

The basic syntax is:

element.addEventListener("event", function () {
    // code
});

For example:

button.addEventListener("click", function () {
    console.log("Button clicked");
});

Here:

• button is the element
• "click" is the event
• function() contains the code that runs when the event happens

Click Event

The click event is one of the most commonly used events.

<button id="btn">Click Me</button>

<script>
const btn = document.getElementById("btn");

btn.addEventListener("click", function () {
    console.log("Hello JavaScript!");
});
</script>

Every time the button is clicked, "Hello JavaScript!" is printed in the browser console.

Input Event

The input event runs whenever the user changes the value of an input field.

<input type="text" id="name">

<script>
const nameInput = document.getElementById("name");

nameInput.addEventListener("input", function () {
    console.log(nameInput.value);
});
</script>

This is useful for search boxes, live validation, and other interactive forms.

Keyboard Events

JavaScript can also detect keyboard actions.

For example:

document.addEventListener("keydown", function () {
    console.log("A key was pressed");
});

You can also find which key was pressed:

document.addEventListener("keydown", function (event) {
    console.log(event.key);
});

If the user presses the Enter key, the result will be:

Enter

Form Submit Event

The submit event is triggered when a form is submitted.

<form id="myForm">
    <input type="text" placeholder="Enter your name">
    <button type="submit">Submit</button>
</form>

<script>
const form = document.getElementById("myForm");

form.addEventListener("submit", function (event) {
    event.preventDefault();

    console.log("Form submitted");
});
</script>

What is preventDefault()?

Normally, submitting a form can reload the page.

event.preventDefault() stops the browser’s default action.

This is useful when you want to process the form using JavaScript or send the data to an API.

Mouse Events

JavaScript provides several mouse-related events.

For example:

const box = document.getElementById("box");

box.addEventListener("mouseover", function () {
    console.log("Mouse entered the box");
});

Some common mouse events are:

click
dblclick
mouseover
mouseout
mousedown
mouseup
mousemove

The Event Object

JavaScript provides information about an event through the event object.

Example:

button.addEventListener("click", function (event) {
    console.log(event);
});

You can use this object to get information about the event.

For keyboard events:

document.addEventListener("keydown", function (event) {
    console.log(event.key);
});

For mouse events:

document.addEventListener("click", function (event) {
    console.log(event.target);
});

event.target tells you which element triggered the event.

Why Are JavaScript Events Important?

Events are the foundation of interactive websites.

They allow you to build features such as:

• Buttons
• Dropdown menus
• Form validation
• Search boxes
• Image sliders
• Modals
• Shopping carts
• Interactive dashboards
• Web applications

Without events, most JavaScript-powered websites would not be interactive.

Conclusion

JavaScript events allow your website to respond to user actions. The addEventListener() method is one of the most important tools for working with events.

Start by learning these events:

click
input
change
submit
keydown
mouseover

Once you understand these basic events, you can start building more interactive JavaScript applications.