# Events — `click`, `submit`, `input` An **event** is something that happens in the browser — a user clicks a button, types in a field, submits a form, moves the mouse, or presses a key. JavaScript can listen for these events and run code in response. This is what makes web pages interactive. --- ## How Events Work The browser constantly watches for events. When one occurs, it fires an **event object** that contains information about what happened — which element was involved, where the mouse was, what key was pressed, and so on. JavaScript **listens** for events using event listeners and runs a **callback function** (called an event handler) when the event fires. ``` User does something → Browser fires an event → JavaScript runs the handler ``` --- ## Adding Event Listeners — `addEventListener` The modern and recommended way to listen for events. **Syntax:** ```js element.addEventListener("eventType", handlerFunction); ``` ```js const button = document.getElementById("btn"); button.addEventListener("click", function () { console.log("Button was clicked!"); }); ``` **With arrow function:** ```js button.addEventListener("click", () => { console.log("Button was clicked!"); }); ``` **With a named function:** ```js function handleClick() { console.log("Button was clicked!"); } button.addEventListener("click", handleClick); ``` Using a named function is preferred when you need to remove the listener later. ### Removing an Event Listener ```js button.removeEventListener("click", handleClick); ``` You can only remove a listener if the exact same function reference was used when adding it. Anonymous functions cannot be removed. ```js // Cannot remove — anonymous function has no reference button.addEventListener("click", () => console.log("click")); button.removeEventListener("click", () => console.log("click")); // does not work ``` --- ## The Event Object Every event handler receives an **event object** as its first argument. It contains details about the event. ```js button.addEventListener("click", function (event) { console.log(event); // the full event object console.log(event.type); // "click" console.log(event.target); // the element that was clicked console.log(event.currentTarget); // the element the listener is attached to }); ``` Commonly used event object properties: | Property / Method | Description | |---|---| | `event.type` | The type of event — `"click"`, `"input"`, etc. | | `event.target` | The element that triggered the event | | `event.currentTarget` | The element the listener is attached to | | `event.preventDefault()` | Stops the browser's default action | | `event.stopPropagation()` | Stops the event from bubbling up | | `event.key` | The key pressed (keyboard events) | | `event.clientX`, `event.clientY` | Mouse position | --- ## 1. The `click` Event Fires when a user clicks on an element. **Basic click:** ```html

Waiting...

``` ```js const btn = document.getElementById("btn"); const output = document.getElementById("output"); btn.addEventListener("click", () => { output.textContent = "Button was clicked!"; }); ``` **Toggle behaviour:** ```js let isOn = false; btn.addEventListener("click", () => { isOn = !isOn; btn.textContent = isOn ? "ON" : "OFF"; btn.style.backgroundColor = isOn ? "green" : "gray"; }); ``` **Using `event.target` — find which element was clicked:** ```js document.addEventListener("click", (event) => { console.log("Clicked element:", event.target.tagName); }); ``` **Counter example:** ```js let count = 0; btn.addEventListener("click", () => { count++; output.textContent = "Count: " + count; }); ``` --- ## 2. The `submit` Event Fires when a form is submitted — either by clicking a submit button or pressing Enter in a text field. **The default behaviour** of form submission is to reload the page (or navigate to the `action` URL). In single-page applications and AJAX workflows, you almost always want to **prevent this** using `event.preventDefault()`. **HTML:** ```html

``` **JavaScript:** ```js const form = document.getElementById("loginForm"); const message = document.getElementById("message"); form.addEventListener("submit", function (event) { event.preventDefault(); // stop page reload const username = document.getElementById("username").value; const password = document.getElementById("password").value; if (username === "" || password === "") { message.textContent = "Please fill in all fields."; message.style.color = "red"; return; } message.textContent = "Welcome, " + username + "!"; message.style.color = "green"; }); ``` **Key points about `submit`:** - Always call `event.preventDefault()` to stop the default page reload. - The event fires on the `

` element, not on the submit button. - Use `.value` to read input field values. --- ## 3. The `input` Event Fires every time the value of an input field, textarea, or select element changes — in real time as the user types. **HTML:** ```html

``` **JavaScript:** ```js const searchBox = document.getElementById("searchBox"); const preview = document.getElementById("preview"); searchBox.addEventListener("input", (event) => { preview.textContent = "You typed: " + event.target.value; }); ``` As the user types each character, `preview` updates instantly. **Character count:** ```js const textarea = document.getElementById("bio"); const counter = document.getElementById("charCount"); const MAX = 150; textarea.addEventListener("input", () => { const remaining = MAX - textarea.value.length; counter.textContent = remaining + " characters remaining"; if (remaining < 0) { counter.style.color = "red"; } else { counter.style.color = "gray"; } }); ``` **Live search filter:** ```js const items = ["Apple", "Banana", "Mango", "Grape", "Orange"]; const search = document.getElementById("searchBox"); const list = document.getElementById("list"); search.addEventListener("input", () => { const query = search.value.toLowerCase(); const filtered = items.filter(item => item.toLowerCase().includes(query)); list.innerHTML = filtered.map(item => `

${item}

`).join(""); }); ``` --- ## `input` vs `change` vs `keyup` | Event | Fires when | Use for | |---|---|---| | `input` | Every character change in real time | Live feedback, search, validation | | `change` | When field loses focus after a value change | Select dropdowns, checkboxes | | `keyup` | Every time a key is released | Keyboard shortcuts, specific key detection | | `keydown` | Every time a key is pressed | Preventing input, detecting key combos | ```js // input — fires on every keystroke input.addEventListener("input", () => console.log("typing:", input.value)); // change — fires when focus is lost after a change input.addEventListener("change", () => console.log("changed to:", input.value)); // keyup — fires when key is released input.addEventListener("keyup", (event) => { if (event.key === "Enter") { console.log("Enter pressed"); } }); ``` --- ## Event Bubbling and Capturing When an event fires on an element, it does not stay on that element — it **bubbles up** through all its ancestors to the `document`. ```html

``` ```js document.getElementById("btn").addEventListener("click", () => console.log("button")); document.getElementById("inner").addEventListener("click", () => console.log("inner")); document.getElementById("outer").addEventListener("click", () => console.log("outer")); ``` Clicking the button outputs: ``` button inner outer ``` The event starts at the button and bubbles up through inner and outer. ### Stopping Bubbling ```js btn.addEventListener("click", (event) => { event.stopPropagation(); // stops here — inner and outer do not fire console.log("button only"); }); ``` ### Event Delegation Because events bubble, you can attach a single listener to a parent element and handle events from many children. This is called **event delegation**. ```html

Apple
Banana
Mango

``` ```js const list = document.getElementById("list"); list.addEventListener("click", (event) => { if (event.target.tagName === "LI") { event.target.style.backgroundColor = "yellow"; console.log("Selected:", event.target.textContent); } }); ``` One listener on `

` children — even ones added dynamically later. **Benefits of event delegation:** - One listener instead of many — better performance. - Works for elements added to the DOM after the listener was set up. --- ## Common Events Reference | Category | Event | Fires when | |---|---|---| | Mouse | `click` | Element is clicked | | Mouse | `dblclick` | Element is double-clicked | | Mouse | `mouseover` | Mouse enters an element | | Mouse | `mouseout` | Mouse leaves an element | | Mouse | `mousemove` | Mouse moves over element | | Keyboard | `keydown` | Key is pressed | | Keyboard | `keyup` | Key is released | | Keyboard | `keypress` | Key is pressed (deprecated) | | Form | `submit` | Form is submitted | | Form | `input` | Input value changes | | Form | `change` | Value changes and field loses focus | | Form | `focus` | Element gains focus | | Form | `blur` | Element loses focus | | Form | `reset` | Form is reset | | Window | `load` | Page fully loaded (images, scripts) | | Window | `DOMContentLoaded` | DOM is ready, before images load | | Window | `resize` | Browser window is resized | | Window | `scroll` | Page is scrolled | --- ## Summary ``` Events | |-- addEventListener(type, handler) | Attach a listener to an element | handler receives the event object | |-- removeEventListener(type, handler) | Must pass the same function reference | |-- click | Fires on mouse click | Use event.target to find clicked element | Closures maintain state between clicks | |-- submit | Fires when a form is submitted | Always call event.preventDefault() | Read values with input.value | |-- input | Fires on every character change in real time | Ideal for live search, validation, character count | |-- Event object | event.type, event.target, event.key | event.preventDefault() — stop default action | event.stopPropagation() — stop bubbling | |-- Event bubbling | Events bubble from target up to document | Use stopPropagation to prevent | |-- Event delegation | One parent listener handles all child events | Use event.target to identify the source ``` **Key rules to remember:** - Always use `addEventListener` — not inline `onclick` attributes. - The event object is always passed as the first argument to the handler. - `event.preventDefault()` stops the browser default — essential for form submit. - `event.target` is the element that triggered the event. `event.currentTarget` is where the listener lives. - Events bubble up through the DOM — use `stopPropagation()` to prevent. - Use event delegation to handle dynamic elements and improve performance. - `input` fires in real time on every change. `change` fires only when the field loses focus. - Named functions must be used with `removeEventListener` — anonymous functions cannot be removed.

Events in DOM (click, submit, input)

Introduction

Events — click, submit, input

Events — `click`, `submit`, `input`