## JavaScript Events ⚡ In the previous chapter, you learned how [JavaScript](/courses/javascript) can manipulate the DOM. You can already: ```text Find elements 🔍 Change text ✏️ Add classes 🎨 Create elements ➕ Remove elements 🗑️ ``` But there's still one big question: > **When should [JavaScript](/courses/javascript) do those things?** For example: ```text When the user clicks? 👆 When they type? ⌨️ When a form is submitted? 📝 When they scroll? 🖱️ When a page finishes loading? 🌐 ``` That's what **events** are for. --- # What Is an Event? 🧠 An **event** is a signal that something has happened. Examples: ```text User clicked a button User pressed Enter User typed into an input Form was submitted Mouse entered an element Page finished loading ``` JavaScript can listen for these events and run code in response. The [function](/javascript/functions-in-javascript) that runs is commonly called an: ```text Event handler ``` or: ```text Event listener ``` --- # Event Mental Model Think: ```text Something happens ↓ Browser creates an event ↓ JavaScript listener detects it ↓ Handler runs ↓ DOM can change ``` Example: ```text User clicks button ↓ click event ↓ JavaScript runs ↓ Button text changes ``` That's the foundation of interactive webpages. 🔥 --- # `addEventListener()` 🎧 The modern way to listen for events is: ```javascript element.addEventListener( eventType, handler ); ``` Example: ```javascript const button = document.querySelector( '#save-btn' ); button.addEventListener( 'click', () => { console.log( 'Button clicked!' ); } ); ``` When the user clicks the button: ```text Button clicked! ``` is logged. --- # Basic Structure ```javascript element.addEventListener( 'click', function() { // respond to click } ); ``` Or with an arrow [function](/javascript/functions-in-javascript): ```javascript element.addEventListener( 'click', () => { // respond } ); ``` --- # Event Type Is a String Examples: ```javascript 'click' 'keydown' 'input' 'submit' 'focus' 'scroll' ``` So: ```javascript button.addEventListener( 'click', handler ); ``` means: > Run `handler` whenever this button receives a click event. --- # Named Event Handlers 🏷️ Instead of: ```javascript button.addEventListener( 'click', () => { console.log( 'Clicked' ); } ); ``` you can define: ```javascript function handleClick() { console.log( 'Clicked' ); } ``` Then: ```javascript button.addEventListener( 'click', handleClick ); ``` This is especially useful when you may want to remove the listener later. --- # Don't Call the Handler Yourself 🚨 Wrong: ```javascript button.addEventListener( 'click', handleClick() ); ``` That immediately calls the function. Correct: ```javascript button.addEventListener( 'click', handleClick ); ``` You're passing the function itself. This is the same callback concept you learned earlier. --- # Multiple Listeners on One Element 🔥 `addEventListener()` allows multiple listeners for the same event. ```javascript button.addEventListener( 'click', () => { console.log( 'Listener 1' ); } ); button.addEventListener( 'click', () => { console.log( 'Listener 2' ); } ); ``` One click can run both. This is one reason `addEventListener()` is more flexible than assigning a single inline-style event property. --- # The Event Object 📦 When an event happens, the browser creates an object containing information about it. Example: ```javascript button.addEventListener( 'click', event => { console.log(event); } ); ``` That: ```javascript event ``` contains information such as: ```text What event happened? Which element triggered it? Which element owns the listener? Mouse position? Keyboard key? Modifier keys? ``` --- # `event.type` ```javascript button.addEventListener( 'click', event => { console.log( event.type ); } ); ``` Output: ```text click ``` --- # `event.target` 🎯 `event.target` is the element where the event originated. Example: ```javascript button.addEventListener( 'click', event => { console.log( event.target ); } ); ``` If the button itself was clicked, the target is that button. --- # `event.currentTarget` 👀 `event.currentTarget` is the element whose listener is currently running. This distinction becomes extremely important with: ```text Bubbling Delegation ``` --- # `target` vs `currentTarget` 🧠 Suppose: ```html ``` Listener: ```javascript const button = document.querySelector( '#save' ); button.addEventListener( 'click', event => { console.log( event.target ); console.log( event.currentTarget ); } ); ``` If the user clicks the ``: ```text event.target → span ``` But: ```text event.currentTarget → button ``` because the listener belongs to the button. --- # Event Listener Options ⚙️ `addEventListener()` can take a third argument: ```javascript element.addEventListener( type, handler, options ); ``` Common options include: ```text once capture passive signal ``` --- # `once: true` ☝️ Run the listener only once: ```javascript button.addEventListener( 'click', () => { console.log( 'Only once' ); }, { once: true } ); ``` After the first click, the listener is automatically removed. --- # `capture` By default, listeners usually run during the: ```text bubble phase ``` You can instead listen during capture: ```javascript element.addEventListener( 'click', handler, { capture: true } ); ``` We'll understand this properly in the bubbling section. --- # `passive` A passive listener promises: > This listener will not call `preventDefault()`. Example: ```javascript window.addEventListener( 'scroll', handleScroll, { passive: true } ); ``` This can help browsers optimize certain scrolling and touch interactions. Do not use `passive: true` if you need: ```javascript event.preventDefault(); ``` inside that listener. --- # Removing Event Listeners 🗑️ Use: ```javascript removeEventListener() ``` Example: ```javascript function handleClick() { console.log( 'Clicked' ); } button.addEventListener( 'click', handleClick ); ``` Later: ```javascript button.removeEventListener( 'click', handleClick ); ``` --- # Important: Function Identity Matters 🚨 This won't remove the original listener: ```javascript button.addEventListener( 'click', () => { console.log('Hi'); } ); button.removeEventListener( 'click', () => { console.log('Hi'); } ); ``` Why? Those are two different function objects. Use the same function reference: ```javascript function handleClick() { console.log('Hi'); } button.addEventListener( 'click', handleClick ); button.removeEventListener( 'click', handleClick ); ``` --- # Removing Listeners With `AbortController` 🛑 A modern pattern is: ```javascript const controller = new AbortController(); ``` Then: ```javascript button.addEventListener( 'click', handleClick, { signal: controller.signal } ); ``` Later: ```javascript controller.abort(); ``` The listener is removed. This becomes very useful when several listeners should be cleaned up together. --- # Mouse Events 🖱️ Common mouse-related events include: ```text click dblclick mousedown mouseup mousemove mouseenter mouseleave mouseover mouseout contextmenu ``` --- # `click` ```javascript button.addEventListener( 'click', () => { console.log( 'Clicked' ); } ); ``` Probably the event you'll use most often. --- # `dblclick` ```javascript element.addEventListener( 'dblclick', () => { console.log( 'Double clicked' ); } ); ``` --- # `mousedown` and `mouseup` ```javascript box.addEventListener( 'mousedown', () => { console.log( 'Mouse button down' ); } ); ``` Then: ```javascript box.addEventListener( 'mouseup', () => { console.log( 'Mouse button released' ); } ); ``` --- # `mousemove` ```javascript box.addEventListener( 'mousemove', event => { console.log( event.clientX, event.clientY ); } ); ``` This can fire very frequently as the pointer moves. So be careful with expensive work inside high-frequency events. --- # Mouse Position Properties 📍 You may encounter: ```javascript event.clientX event.clientY ``` Position relative to the viewport. Also: ```javascript event.pageX event.pageY ``` Position relative to the document. And: ```javascript event.offsetX event.offsetY ``` Position relative to the event target's local coordinate system. --- # `mouseenter` and `mouseleave` Example: ```javascript box.addEventListener( 'mouseenter', () => { box.classList.add( 'hovered' ); } ); box.addEventListener( 'mouseleave', () => { box.classList.remove( 'hovered' ); } ); ``` Useful for pointer-enter/leave interactions. --- # `mouseover` vs `mouseenter` 🤔 These sound similar. A key practical difference: ```text mouseover → bubbles ``` while: ```text mouseenter → does not bubble in the same way ``` Also, moving between descendants can cause `mouseover`-style behavior more often. For simple "pointer entered this element" behavior: ```text mouseenter ``` is often easier to reason about. --- # Keyboard Events ⌨️ The main modern keyboard events are: ```text keydown keyup ``` --- # `keydown` Fires when a key is pressed. ```javascript document.addEventListener( 'keydown', event => { console.log( event.key ); } ); ``` If the user presses Enter: ```text Enter ``` --- # `keyup` ```javascript document.addEventListener( 'keyup', event => { console.log( `Released: ${event.key}` ); } ); ``` Runs when the key is released. --- # Avoid `keypress` 🚨 You may see: ```javascript keypress ``` in older code. It is deprecated. Prefer: ```text keydown keyup ``` --- # `event.key` Represents the key value. Examples: ```text a A Enter Escape ArrowUp Backspace ``` Example: ```javascript document.addEventListener( 'keydown', event => { if ( event.key === 'Escape' ) { console.log( 'Escape pressed' ); } } ); ``` --- # `event.code` `event.code` represents the physical keyboard key. Example: ```javascript document.addEventListener( 'keydown', event => { console.log( event.key ); console.log( event.code ); } ); ``` You might see: ```text key → a code → KeyA ``` --- # `key` vs `code` 🧠 Simple mental model: ```text event.key → what key value did this interaction represent? ``` ```text event.code → which physical keyboard key? ``` For most normal keyboard shortcuts and text-related interactions: ```javascript event.key ``` is often what you need. --- # Modifier Keys Keyboard and pointer events can expose: ```javascript event.ctrlKey event.shiftKey event.altKey event.metaKey ``` Each is a Boolean. --- # Keyboard Shortcut Example 💾 ```javascript document.addEventListener( 'keydown', event => { if ( event.ctrlKey && event.key.toLowerCase() === 's' ) { event.preventDefault(); console.log( 'Save triggered' ); } } ); ``` On macOS-style shortcuts, you may also need: ```javascript event.metaKey ``` depending on your UX. --- # Form Events 📝 Forms introduce several important events: ```text submit input change focus blur reset ``` --- # `input` — Fires As the Value Changes ⚡ [HTML](/courses/html): ```html ``` JavaScript: ```javascript const input = document.querySelector( '#search' ); input.addEventListener( 'input', event => { console.log( event.target.value ); } ); ``` As the user types: ```text j ja jav java ``` the listener can run after each change. --- # `change` `change` behaves differently depending on the control. For a text input, it commonly fires when the value has been changed and then committed, often when the input loses focus. Example: ```javascript input.addEventListener( 'change', event => { console.log( 'Changed to:', event.target.value ); } ); ``` For controls like checkboxes and select elements, the timing is different and usually tied to committing the new selection/value. --- # `input` vs `change` 🧠 For text input: ```text input → react as value changes ``` ```text change → react when the new value is committed ``` Use the one that matches your UX. --- # `focus` ```javascript input.addEventListener( 'focus', () => { console.log( 'Input focused' ); } ); ``` Runs when the element receives focus. --- # `blur` ```javascript input.addEventListener( 'blur', () => { console.log( 'Input lost focus' ); } ); ``` Useful for: ```text Validation Field highlighting Helpful UI messages ``` --- # `focus` and `blur` Don't Normally Bubble Like Clicks This matters for delegation. If you need bubbling focus-related events, you'll often encounter: ```text focusin focusout ``` We'll keep that as an advanced note rather than overcomplicating basic form events. --- # Form `submit` 🚀 Suppose: ```html ``` Select: ```javascript const form = document.querySelector( '#login' ); ``` Listen: ```javascript form.addEventListener( 'submit', event => { console.log( 'Form submitted' ); } ); ``` --- # Default Form Behavior A browser form normally performs its configured submission behavior. In many client-side applications, you want JavaScript to handle the submission instead. Use: ```javascript event.preventDefault(); ``` --- # `preventDefault()` 🛑 Example: ```javascript form.addEventListener( 'submit', event => { event.preventDefault(); console.log( 'Handled with JS' ); } ); ``` This prevents the browser's default submission action. --- # `preventDefault()` Does Not Stop Bubbling 🚨 This is important. ```javascript event.preventDefault(); ``` means: > Prevent the browser's default action. It does **not** mean: > Stop the event from propagating. Those are different concepts. --- # Preventing Link Navigation 🔗 Suppose: ```html Settings ``` You can intercept it: ```javascript const link = document.querySelector( '.tab-link' ); link.addEventListener( 'click', event => { event.preventDefault(); console.log( 'Custom tab logic' ); } ); ``` Use this only when replacing the normal navigation intentionally. --- # FormData 📦 You learned `FormData` briefly in the Fetch chapter. It's also extremely useful with form events. ```javascript form.addEventListener( 'submit', event => { event.preventDefault(); const formData = new FormData(form); console.log( formData.get( 'email' ) ); } ); ``` --- # FormData → Object You can convert entries: ```javascript const data = Object.fromEntries( new FormData(form) ); ``` Then: ```javascript console.log(data); ``` might produce: ```javascript { email: 'alice@example.com', password: 'secret' } ``` --- # Important Checkbox Note ✅ Unchecked checkboxes are generally not included in submitted `FormData`. So application code may need to handle them intentionally. Example: ```javascript const remember = form.elements .remember .checked; ``` Don't assume every form control automatically appears exactly how you expect. --- # Event Propagation 🌊 Now we reach one of the most important event concepts. Suppose [HTML](/courses/html) looks like: ```html

``` The button is nested inside: ```text outer ↓ inner ↓ button ``` When the button is clicked, the event doesn't exist only at the button. It travels through the DOM. This is called: # Event Propagation --- # The Three Event Phases Conceptually, an event moves through: ```text 1. Capture phase ⬇️ 2. Target phase 🎯 3. Bubble phase ⬆️ ``` --- # Capture Phase ⬇️ The event travels from the outer document/window side toward the target. Conceptually: ```text window ↓ document ↓ html ↓ body ↓ outer ↓ inner ↓ button ``` --- # Target Phase 🎯 The event reaches the element where it originated. ```text button ``` --- # Bubble Phase ⬆️ For events that bubble, the event then travels upward again: ```text button ↑ inner ↑ outer ↑ body ↑ html ↑ document ↑ window ``` This behavior is: **Event bubbling** --- # Basic Bubbling Example 🔥 ```javascript const button = document.querySelector( '#button' ); const inner = document.querySelector( '#inner' ); const outer = document.querySelector( '#outer' ); ``` Listeners: ```javascript button.addEventListener( 'click', () => { console.log( 'Button' ); } ); inner.addEventListener( 'click', () => { console.log( 'Inner' ); } ); outer.addEventListener( 'click', () => { console.log( 'Outer' ); } ); ``` Click the button. Typical bubble-order output: ```text Button Inner Outer ``` The event traveled upward. --- # Why Bubbling Matters 🧠 Bubbling makes things like: ```text Event delegation ``` possible. Instead of attaching a listener to every child... a parent can listen for events that bubble up from those children. We'll see that shortly. --- # Capture Listeners ⬇️ Normally: ```javascript element.addEventListener( 'click', handler ); ``` uses the bubble phase. To listen during capture: ```javascript element.addEventListener( 'click', handler, { capture: true } ); ``` --- # Capture Example ```javascript outer.addEventListener( 'click', () => { console.log( 'Outer capture' ); }, { capture: true } ); ``` This runs while the event travels down toward the target. Most everyday UI code uses bubbling. But understanding capture helps you understand the complete event system. --- # `stopPropagation()` 🛑 Sometimes you don't want the event to continue propagating. Use: ```javascript event.stopPropagation(); ``` Example: ```javascript button.addEventListener( 'click', event => { event.stopPropagation(); console.log( 'Button only' ); } ); ``` The event will not continue through later ancestors in that propagation direction. --- # Don't Use `stopPropagation()` Everywhere 🚨 It can be tempting to stop every event. But this can break: ```text Parent listeners Delegation Reusable components Analytics listeners Other application behavior ``` Use it when propagation genuinely needs to stop. --- # `stopImmediatePropagation()` 🛑🛑 Suppose one element has multiple listeners: ```javascript button.addEventListener( 'click', () => { console.log('A'); } ); button.addEventListener( 'click', () => { console.log('B'); } ); ``` Normally both run. But: ```javascript button.addEventListener( 'click', event => { event .stopImmediatePropagation(); console.log( 'Only this' ); } ); ``` prevents later listeners on that same element from running and also stops further propagation. This is a stronger tool. Use it carefully. --- # `preventDefault()` vs `stopPropagation()` 🧠 This distinction is essential. ```javascript event.preventDefault(); ``` means: ```text Don't perform browser default action ``` Examples: ```text Don't navigate link Don't perform normal form submission ``` While: ```javascript event.stopPropagation(); ``` means: ```text Don't continue propagating this event ``` Different jobs. --- # Event Delegation 🔥 Suppose you have: ```html

Task 1
Task 2
Task 3

``` You could attach a listener to every `

`. But what if there are: ```text 1,000 items? ``` Or new items get added dynamically? Instead, attach **one listener to the parent**. This is called: # Event Delegation --- # Basic Delegation ```javascript const list = document.querySelector( '#todo-list' ); list.addEventListener( 'click', event => { console.log( event.target ); } ); ``` Because clicks on children bubble to the list, the parent listener can detect them. --- # Delegation With `matches()` ```javascript list.addEventListener( 'click', event => { if ( event.target.matches( 'li' ) ) { console.log( event.target.textContent ); } } ); ``` One listener handles all list items. --- # Why `closest()` Is Often Better 🧠 Suppose: ```html ``` If the user clicks the ``: ```javascript event.target ``` is: ```text span ``` So this may fail: ```javascript event.target.matches( '.delete-btn' ); ``` Better: ```javascript const button = event.target.closest( '.delete-btn' ); ``` Now a click inside the button can still find the button. --- # Important Delegation Boundary Check 🚨 When using `closest()`, make sure the matched element actually belongs to the delegated container if your structure could contain nested or unexpected elements. Example: ```javascript list.addEventListener( 'click', event => { const button = event.target.closest( '.delete-btn' ); if ( !button || !list.contains(button) ) { return; } // handle button } ); ``` This keeps delegation scoped to the intended container. --- # Real Delegation Example: Todo List ✅ HTML structure: ```html

``` JavaScript: ```javascript const list = document.querySelector( '#todo-list' ); list.addEventListener( 'click', event => { const deleteButton = event.target.closest( '.delete-btn' ); if ( deleteButton && list.contains( deleteButton ) ) { const todo = deleteButton.closest( '.todo-item' ); todo?.remove(); return; } const checkbox = event.target.closest( 'input[type="checkbox"]' ); if ( checkbox && list.contains( checkbox ) ) { const todo = checkbox.closest( '.todo-item' ); todo ?.classList .toggle( 'completed', checkbox.checked ); } } ); ``` One listener handles: ```text Delete buttons Checkboxes Existing items Future items ``` 🔥 --- # Dynamically Added Elements Work Automatically Suppose: ```javascript function addTodo(text) { const item = document.createElement( 'li' ); item.className = 'todo-item'; ``` Create checkbox: ```javascript const checkbox = document.createElement( 'input' ); checkbox.type = 'checkbox'; ``` Create label: ```javascript const label = document.createElement( 'span' ); label.textContent = text; ``` Create delete button: ```javascript const deleteButton = document.createElement( 'button' ); deleteButton.className = 'delete-btn'; deleteButton.textContent = 'Delete'; ``` Append: ```javascript item.append( checkbox, label, deleteButton ); list.append(item); } ``` No additional event listener is required. The parent listener already handles it. That's one of delegation's biggest advantages. --- # Event Delegation Benefits 🧠 ```text Fewer listeners Works with dynamic children Centralized event logic Great for lists/tables/menus Uses bubbling naturally ``` --- # Delegation Is Not Always Necessary For one button: ```javascript saveButton.addEventListener( 'click', save ); ``` is perfectly fine. Don't turn every event into delegation. Use delegation where it makes the code simpler. --- # Window Events 🌐 You can also listen on: ```javascript window ``` Examples include: ```text load resize scroll beforeunload ``` --- # `load` ```javascript window.addEventListener( 'load', () => { console.log( 'Page resources loaded' ); } ); ``` `load` waits for the document and dependent resources such as images/stylesheets to finish loading. --- # `DOMContentLoaded` Another important event: ```javascript document.addEventListener( 'DOMContentLoaded', () => { console.log( 'DOM ready' ); } ); ``` This fires when the initial HTML has been parsed and the DOM is ready, without necessarily waiting for every external resource. --- # `DOMContentLoaded` vs `load` 🧠 Simplified: ```text DOMContentLoaded → DOM is parsed ``` ```text load → document + dependent resources finished loading ``` For DOM initialization, `DOMContentLoaded` is often more relevant. If your script is already deferred/module-loaded appropriately, you may not need to wrap everything in it. --- # `resize` ```javascript window.addEventListener( 'resize', () => { console.log( window.innerWidth ); } ); ``` This can fire frequently. Avoid expensive work on every raw resize event. --- # `scroll` ```javascript window.addEventListener( 'scroll', () => { console.log( window.scrollY ); } ); ``` Also potentially high-frequency. For certain visibility-based use cases, browser APIs such as `IntersectionObserver` can sometimes be more appropriate than raw scroll listeners. --- # `beforeunload` 🚪 You may encounter: ```javascript window.addEventListener( 'beforeunload', event => { // browser-controlled warning behavior } ); ``` Browsers heavily restrict how this event can be used. Don't rely on custom text or abuse it to trap users on a page. --- # Clipboard Events 📋 Common clipboard events: ```text copy cut paste ``` Example: ```javascript input.addEventListener( 'paste', event => { console.log( 'Content pasted' ); } ); ``` Clipboard access can have browser permission and security restrictions depending on the operation. --- # Drag Events 🖱️ Drag-and-drop interfaces use events such as: ```text dragstart drag dragenter dragover dragleave drop ``` Example: ```javascript dropZone.addEventListener( 'dragover', event => { event.preventDefault(); } ); ``` Allowing a drop often requires preventing the default behavior on `dragover`. Then: ```javascript dropZone.addEventListener( 'drop', event => { event.preventDefault(); console.log( 'Dropped' ); } ); ``` Full drag-and-drop systems deserve deeper treatment than a small events chapter section. --- # Touch and Pointer Events 📱 Older touch-focused APIs include: ```text touchstart touchmove touchend ``` Modern browsers also support: ```text pointerdown pointermove pointerup pointerenter pointerleave ``` Pointer events can unify interactions from: ```text Mouse Touch Stylus ``` For many modern interfaces, pointer events can be more flexible than building separate mouse and touch logic. --- # Media Events 🎵 Audio and video elements emit events such as: ```text play pause ended timeupdate ``` Example: ```javascript video.addEventListener( 'play', () => { console.log( 'Video started' ); } ); ``` --- # Custom Events 📣 You're not limited to browser-generated events. JavaScript can create custom application events. Use: ```javascript CustomEvent ``` --- # Creating a Custom Event ```javascript const event = new CustomEvent( 'user-login', { detail: { userId: 42 } } ); ``` The: ```javascript detail ``` property carries custom data. --- # Dispatching an Event ```javascript document.dispatchEvent( event ); ``` This sends the event. --- # Listening for It ```javascript document.addEventListener( 'user-login', event => { console.log( event.detail.userId ); } ); ``` Output: ```text 42 ``` --- # Custom Event Example 🔥 ```javascript function notifyUser( message, type = 'info' ) { const notification = new CustomEvent( 'notification', { detail: { message, type } } ); document.dispatchEvent( notification ); } ``` Listen: ```javascript document.addEventListener( 'notification', event => { const { message, type } = event.detail; console.log( `[${type}] ${message}` ); } ); ``` Dispatch: ```javascript notifyUser( 'File saved', 'success' ); ``` --- # Custom Events Can Bubble Too 🌊 By default, a `CustomEvent` does not bubble unless you configure it. Example: ```javascript const event = new CustomEvent( 'notification', { bubbles: true, detail: { message: 'Saved' } } ); ``` Now the event can participate in normal DOM bubbling. --- # Cancelable Custom Events 🛑 You can create: ```javascript const event = new CustomEvent( 'before-save', { cancelable: true } ); ``` A listener can call: ```javascript event.preventDefault(); ``` Then the dispatching code can check: ```javascript const allowed = element.dispatchEvent( event ); ``` If the event was canceled: ```text allowed → false ``` This allows components to communicate without directly knowing about each other's implementation. --- # `this` Inside Event Listeners 👀 With a traditional function: ```javascript button.addEventListener( 'click', function(event) { console.log( this ); } ); ``` `this` is typically the same element as: ```javascript event.currentTarget ``` for that listener call. --- # Arrow Function Difference ```javascript button.addEventListener( 'click', event => { console.log( this ); } ); ``` Arrow functions do not create their own `this`. They use lexical `this` from the surrounding scope. So when dealing with event elements, this is often clearer: ```javascript event.currentTarget ``` than relying on `this`. --- # Event Handler Cleanup 🧹 Event listeners can stay attached as long as the target exists. In long-running applications, adding listeners repeatedly without removing them can create: ```text Duplicate behavior Unexpected callbacks Unnecessary references ``` Use: ```javascript removeEventListener() ``` when needed. Or: ```javascript AbortController ``` for convenient cleanup. --- # Example: Group Cleanup With AbortController ```javascript const controller = new AbortController(); const options = { signal: controller.signal }; ``` Add several listeners: ```javascript button.addEventListener( 'click', handleClick, options ); input.addEventListener( 'input', handleInput, options ); window.addEventListener( 'resize', handleResize, options ); ``` Clean them all: ```javascript controller.abort(); ``` Very useful for temporary interfaces. --- # Debouncing High-Frequency Events ⏱️ Events like: ```text input resize scroll mousemove ``` may fire many times. Sometimes you don't want expensive code running every single time. A common technique is: **Debouncing** Simple example: ```javascript function debounce( fn, delay ) { let timeoutId; return (...args) => { clearTimeout( timeoutId ); timeoutId = setTimeout( () => fn(...args), delay ); }; } ``` Use: ```javascript const handleSearch = debounce( event => { console.log( event.target.value ); }, 300 ); input.addEventListener( 'input', handleSearch ); ``` Now the handler waits until the user pauses typing. Useful for: ```text Search suggestions API search requests Expensive filtering ``` This is an important practical pattern, but you don't need to debounce every event. --- # Event Delegation + DOM = Powerful UI 🔥 Suppose you dynamically render products: ```javascript const products = [ { id: 1, name: 'Keyboard' }, { id: 2, name: 'Mouse' } ]; ``` Render buttons: ```javascript for ( const product of products ) { const button = document.createElement( 'button' ); button.className = 'add-to-cart'; button.dataset.id = product.id; button.textContent = `Add ${product.name}`; container.append( button ); } ``` Instead of attaching a listener to each button: ```javascript container.addEventListener( 'click', event => { const button = event.target.closest( '.add-to-cart' ); if ( !button || !container.contains( button ) ) { return; } const productId = Number( button.dataset.id ); console.log( `Add product ${ productId }` ); } ); ``` One listener handles every product button. --- # Events + Fetch + DOM = Real Applications 🚀 Suppose a form submits: ```javascript form.addEventListener( 'submit', async event => { event.preventDefault(); const data = Object.fromEntries( new FormData(form) ); try { const response = await fetch( '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify( data ) } ); if (!response.ok) { throw new Error( `HTTP ${ response.status }` ); } const user = await response.json(); status.textContent = `Created ${user.name}`; } catch (error) { status.textContent = 'Could not create user.'; } } ); ``` Look at everything you've connected: ```text Event ↓ FormData ↓ Object ↓ Fetch ↓ Promise ↓ Async/Await ↓ DOM update ``` That's real frontend development. 🔥 --- # Common Event Mistakes 🚨 ## 1️⃣ Calling the Handler Instead of Passing It Wrong: ```javascript button.addEventListener( 'click', handleClick() ); ``` Correct: ```javascript button.addEventListener( 'click', handleClick ); ``` --- # 2️⃣ Trying to Remove an Anonymous Listener With a New Function Wrong: ```javascript button.addEventListener( 'click', () => { console.log('Hi'); } ); button.removeEventListener( 'click', () => { console.log('Hi'); } ); ``` The functions are different references. Use a named or stored function. --- # 3️⃣ Confusing `target` and `currentTarget` Remember: ```text target → where event originated ``` ```text currentTarget → whose listener is currently running ``` Especially important with delegation. --- # 4️⃣ Using `preventDefault()` When You Mean `stopPropagation()` They are not interchangeable. ```javascript event.preventDefault(); ``` stops default browser behavior. ```javascript event.stopPropagation(); ``` stops event propagation. --- # 5️⃣ Using `stopPropagation()` Without Needing It It can break delegation and parent listeners. Use it intentionally. --- # 6️⃣ Using `keypress` Avoid: ```javascript keypress ``` Prefer: ```text keydown keyup ``` --- # 7️⃣ Expecting `forEach()`-Style Listener Logic to Handle Dynamic Children If you do: ```javascript document .querySelectorAll( '.delete-btn' ) .forEach( button => { button.addEventListener( 'click', deleteItem ); } ); ``` new buttons added later won't automatically receive that listener. Delegation may be a better fit. --- # 8️⃣ Forgetting High-Frequency Events Be cautious with: ```text mousemove scroll resize input ``` when the handler performs heavy work. Consider: ```text Debouncing Throttling More specialized browser APIs ``` where appropriate. --- # 9️⃣ Using `innerHTML` With User Input in Event Handlers Still dangerous: ```javascript form.addEventListener( 'submit', event => { output.innerHTML = input.value; } ); ``` For plain text: ```javascript output.textContent = input.value; ``` is safer. Event handling does not change the XSS rules from the DOM chapter. --- # 🧪 Mini Challenge 1 What gets logged? ```javascript button.addEventListener( 'click', event => { console.log( event.type ); } ); ``` When clicked: ### Answer ```text click ``` --- # 🧪 Mini Challenge 2 HTML: ```html ``` The listener is attached to the button. The user clicks the ``. What is: ```javascript event.target ``` ### Answer The: ```text span ``` because that's where the click originated. And: ```javascript event.currentTarget ``` is the: ```text button ``` --- # 🧪 Mini Challenge 3 What does: ```javascript event.preventDefault(); ``` do during a normal form submission? ### Answer It prevents the browser's default form submission behavior. It does **not** automatically stop event bubbling. --- # 🧪 Mini Challenge 4 Given: ```text Button inside Div ``` with normal bubbling listeners on both... which usually runs first after clicking the button? ### Answer ```text Button listener ↓ Parent div listener ``` The event bubbles upward. --- # 🧪 Mini Challenge 5 Why can event delegation handle dynamically added elements? ### Answer Because the listener is attached to a stable ancestor, and matching child events can bubble to that ancestor later. The new child doesn't need its own individual listener. --- # 🧪 Mini Challenge 6 What's wrong here? ```javascript await list.forEach( async item => { // ... } ); ``` ### Answer That's actually an [async](/javascript/promises-asynchronous-javascript)-array issue rather than an event issue. 😄 `forEach()` doesn't return a Promise representing its [async](/javascript/promises-asynchronous-javascript) callbacks. A useful reminder that JavaScript features often interact—but each still follows its own rules. --- # 🧠 Quick Recap ## Listen ```javascript element.addEventListener( 'click', handler ); ``` --- ## Remove ```javascript element.removeEventListener( 'click', handler ); ``` --- ## Event Information ```javascript event.type event.target event.currentTarget ``` --- ## Prevent Browser Action ```javascript event.preventDefault(); ``` --- ## Stop Propagation ```javascript event.stopPropagation(); ``` --- ## Stronger Propagation Stop ```javascript event .stopImmediatePropagation(); ``` --- ## Run Once ```javascript { once: true } ``` --- ## Capture ```javascript { capture: true } ``` --- ## Common Mouse Events ```text click dblclick mousedown mouseup mousemove mouseenter mouseleave ``` --- ## Keyboard ```text keydown keyup ``` Useful values: ```javascript event.key event.code event.ctrlKey event.shiftKey event.altKey event.metaKey ``` --- ## Forms ```text submit input change focus blur reset ``` --- ## Page / Window ```text DOMContentLoaded load resize scroll ``` --- ## Delegation ```javascript parent.addEventListener( 'click', event => { const target = event.target.closest( '.action' ); if (!target) { return; } // handle } ); ``` --- ## Custom Event ```javascript const event = new CustomEvent( 'something-happened', { detail: { value: 42 } } ); element.dispatchEvent( event ); ``` --- # The Core Event Mental Model 🧠 Remember: ```text Something happens ↓ Browser creates event ↓ Listener receives event ↓ Handler runs ↓ Application reacts ``` And for bubbling: ```text Child event ↓ Target ↓ Parent ↓ Ancestor ``` That's the foundation of event-driven browser JavaScript. --- # The Bigger Frontend Picture 🚀 You can now connect nearly everything you've learned: ```text DOM ↓ Create UI Events ↓ Detect user interaction Fetch ↓ Talk to server Async/Await ↓ Wait for result Objects & Arrays ↓ Store data DOM again ↓ Render updated UI ``` That loop powers a huge amount of frontend development. --- # 🚀 What's Next? So far, your application can [react](/courses/reactjs) while the page is open. But what happens when the user refreshes? Suppose they choose: ```text Dark mode 🌙 ``` Refresh... and suddenly: ```text Light mode again 😭 ``` What if we want the browser to remember things like: ```text Theme Preferences Draft text Recent searches Small pieces of application data ``` That's where browser storage comes in. Next chapter: # JSON & Web Storage APIs 💾 You'll learn: ```text JSON.stringify() JSON.parse() localStorage sessionStorage Storage limitations Safe serialization When browser storage is appropriate ``` --- # Keep Learning With asif.to 🚀 Don't memorize 50 browser event names. First master: ```text click input submit keydown ``` Then deeply understand: ```text event.target currentTarget preventDefault() bubbling delegation ``` Those concepts are far more valuable than memorizing a huge event list. Build small interactive features: ```text Todo list ✅ Search field 🔍 Modal 🪟 Dropdown 📂 Form 📝 Theme toggle 🌙 Dynamic product list 🛒 ``` That's how events become natural. At **asif.to**, the goal is: > **Understand → Practice → Build → Repeat. 🔁** 🌐 **asif.to** Follow **asif.to** on social media for: * ⚡ Quick JavaScript tips * 🧠 Beginner-friendly explanations * ⚛️ [React](/courses/reactjs) & [Next.js](/courses/nextjs) learning * 💻 Practical coding tutorials * 🎯 Interview preparation * 🚀 New developer resources **One concept at a time. One level higher every day. 🚀** ### See you in the JSON & Web Storage chapter 👋