Phase 11 — Events (Very Important)

Module 38.1 — JavaScript Event Basics & Common Events

What is an Event?

An Event is an action or occurrence that happens in the browser. Events are triggered by the user or the browser itself, and JavaScript listens for these events to perform actions.

Examples of events include:

• Clicking a button
• Typing in an input field
• Submitting a form
• Scrolling a page
• Dragging an element
• Touching the screen on mobile devices

Without events, web pages would be static and non-interactive.

Event Flow

textCopy
1User Action
2      │
3      ▼
4Browser Detects Event
5      │
6      ▼
7JavaScript Event Listener
8      │
9      ▼
10Callback Function Executes
11      │
12      ▼
13DOM Updates

The Event Object

Every event provides an Event Object containing useful information.

javascriptCopy
1button.addEventListener("click", (event) => {
2
3    console.log(event);
4
5});

Useful properties:

javascriptCopy
1event.target
2event.type
3event.currentTarget
4event.clientX
5event.clientY
6event.key
7event.timeStamp

Sample HTML

htmlCopy
1<button id="btn">
2    Click Me
3</button>
4
5<input
6    id="name"
7    placeholder="Enter Name">
8
9<form id="login">
10
11    <input
12        type="text"
13        placeholder="Username">
14
15    <button>
16        Login
17    </button>
18
19</form>

click Event

The click event occurs when the user clicks an element.

javascriptCopy
1const button = document.getElementById("btn");
2
3button.addEventListener("click", () => {
4
5    alert("Button Clicked");
6
7});

Common Uses

• Buttons
• Menus
• Navigation
• Cards

dblclick Event

Occurs when the user double-clicks an element.

javascriptCopy
1button.addEventListener("dblclick", () => {
2
3    console.log("Double Click");
4
5});

Common Uses

• Rename Files
• Image Zoom
• Text Editing

submit Event

Triggered when a form is submitted.

javascriptCopy
1const form = document.getElementById("login");
2
3form.addEventListener("submit", (event) => {
4
5    event.preventDefault();
6
7    console.log("Form Submitted");
8
9});

change Event

Occurs when the value changes and loses focus.

javascriptCopy
1const input = document.getElementById("name");
2
3input.addEventListener("change", () => {
4
5    console.log(input.value);
6
7});

Works with

• Input
• Select
• Checkbox
• Radio Button

input Event

Fires every time the user types.

javascriptCopy
1input.addEventListener("input", () => {
2
3    console.log(input.value);
4
5});

Used in

• Live Search
• Character Counter
• Auto Suggestions

Keyboard Events

JavaScript provides three keyboard events.

keydown

Occurs when a key is pressed.

javascriptCopy
1document.addEventListener("keydown", (event) => {
2
3    console.log(event.key);
4
5});

keyup

Occurs when the key is released.

javascriptCopy
1document.addEventListener("keyup", (event) => {
2
3    console.log(event.key);
4
5});

keypress (Deprecated)

javascriptCopy
1document.addEventListener("keypress", () => {
2
3    console.log("Pressed");
4
5});

keypress is deprecated. Prefer keydown or keyup for new applications.

Focus Events

focus

Triggered when an element gains focus.

javascriptCopy
1input.addEventListener("focus", () => {
2
3    input.style.borderColor = "blue";
4
5});

blur

Triggered when focus leaves the element.

javascriptCopy
1input.addEventListener("blur", () => {
2
3    input.style.borderColor = "gray";
4
5});

Used in

• Form Validation
• Login Forms

scroll Event

Occurs when the page or an element is scrolled.

javascriptCopy
1window.addEventListener("scroll", () => {
2
3    console.log(window.scrollY);
4
5});

Common Uses

• Sticky Navbar
• Infinite Scroll
• Back-to-Top Button

resize Event

Occurs when the browser window size changes.

javascriptCopy
1window.addEventListener("resize", () => {
2
3    console.log(window.innerWidth);
4
5});

Used in

• Responsive Layouts
• Charts
• Dashboards

Mouse Events

mouseenter

Triggered when the pointer enters an element.

javascriptCopy
1box.addEventListener("mouseenter", () => {
2
3    box.style.background = "green";
4
5});

mouseleave

Occurs when the pointer leaves an element.

javascriptCopy
1box.addEventListener("mouseleave", () => {
2
3    box.style.background = "white";
4
5});

mouseover

Fires when entering the element or one of its child elements.

javascriptCopy
1box.addEventListener("mouseover", () => {
2
3    console.log("Mouse Over");
4
5});

mouseout

Occurs when the mouse leaves the element or a child element.

javascriptCopy
1box.addEventListener("mouseout", () => {
2
3    console.log("Mouse Out");
4
5});

mouseenter vs mouseover

contextmenu Event

Occurs when the user right-clicks.

javascriptCopy
1document.addEventListener("contextmenu", (event) => {
2
3    event.preventDefault();
4
5    console.log("Right Click");
6
7});

Used for

• Custom Context Menus
• File Managers

Touch Events

Touch events are designed for mobile devices.

Main events:

• touchstart
• touchmove
• touchend
• touchcancel

Example

javascriptCopy
1box.addEventListener("touchstart", () => {
2
3    console.log("Touch Started");
4
5});

Used in

• Mobile Apps
• Drawing Applications
• Games

Drag Events

HTML5 provides drag-and-drop events.

Main events

• dragstart
• drag
• dragend
• dragenter
• dragleave
• dragover
• drop

Example

javascriptCopy
1item.addEventListener("dragstart", () => {
2
3    console.log("Dragging");
4
5});

Used in

• Kanban Boards
• File Uploaders
• Trello-like Apps

Pointer Events

Pointer Events work with:

• Mouse
• Touch
• Stylus (Pen)

Main events

• pointerdown
• pointerup
• pointermove
• pointerenter
• pointerleave

Example

javascriptCopy
1box.addEventListener("pointerdown", () => {
2
3    console.log("Pointer Down");
4
5});

Pointer events provide a unified API for different input devices.

Practical Example — Live Input Preview

HTML

htmlCopy
1<input
2    id="username"
3    placeholder="Enter your name">
4
5<h2 id="preview"></h2>

JavaScript

javascriptCopy
1const input = document.getElementById("username");
2const preview = document.getElementById("preview");
3
4input.addEventListener("input", () => {
5
6    preview.textContent = input.value;
7
8});

Mini Project — Mouse Event Playground

HTML

htmlCopy
1<div id="box">
2    Hover Me
3</div>

CSS

cssCopy
1#box{
2    width:200px;
3    height:120px;
4    background:#ddd;
5    display:flex;
6    align-items:center;
7    justify-content:center;
8    cursor:pointer;
9}

JavaScript

javascriptCopy
1const box = document.getElementById("box");
2
3box.addEventListener("mouseenter", () => {
4
5    box.style.background = "green";
6
7});
8
9box.addEventListener("mouseleave", () => {
10
11    box.style.background = "#ddd";
12
13});
14
15box.addEventListener("click", () => {
16
17    alert("Clicked!");
18
19});

Common Mistakes

Using keypress

keypress is deprecated. Prefer:

• keydown
• keyup

Using change Instead of input

Use:

• input for real-time updates.
• change when you only need the final value after editing.

Forgetting preventDefault() on Forms

Without event.preventDefault(), form submission reloads the page by default.

Best Practices

• Use addEventListener() instead of inline HTML event attributes like onclick.
• Prefer input over change for live interactions.
• Use keydown or keyup instead of the deprecated keypress.
• Use pointer events when supporting mouse, touch, and stylus with a single API.
• Keep event handlers focused on a single responsibility for better maintainability.

Interview Questions

Q1. What is an event in JavaScript?

An event is an action or occurrence, such as a click or key press, that JavaScript can detect and respond to.

Q2. What is the difference between input and change events?

• input fires immediately whenever the value changes.
• change fires after the value changes and the element loses focus (or when a selection is committed).

Q3. Why is keypress deprecated?

It does not handle all keyboard input consistently. Modern applications should use keydown or keyup.

Q4. What are pointer events?

Pointer events provide a unified event model that works with mouse, touch, and pen input.

Summary

In this module, you learned the fundamentals of JavaScript events, including mouse, keyboard, form, focus, scroll, resize, touch, drag, and pointer events. You also explored the event object and built practical examples using addEventListener(). Understanding these event types is the foundation for creating interactive and responsive web applications.

Next Module: Module 38.2 — Event Listeners & Event Methods, where you'll learn addEventListener(), removeEventListener(), preventDefault(), stopPropagation(), stopImmediatePropagation(), event bubbling, capturing, delegation, and advanced event handling patterns used in professional applications.