"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", em: "em", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {CodeEditor} = _components; if (!CodeEditor) _missingMdxReference("CodeEditor", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { children: ["Common Events: ", _jsx(_components.code, { children: "click" }), ", ", _jsx(_components.code, { children: "input" }), ", ", _jsx(_components.code, { children: "submit" }), ", and More"] }), "\n", _jsxs(_components.p, { children: ["In the previous lesson, we learned how to attach event listeners using ", _jsx(_components.code, { children: "addEventListener()" }), ". Now, let's explore the most common types of events you'll encounter and how to respond to them. Events can be broadly categorized based on the type of interaction or change they represent."] }), "\n", _jsx(_components.p, { children: "Understanding these events is essential for building responsive and interactive user interfaces." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. Mouse Events" }), "\n", _jsx(_components.p, { children: "These events respond to user interactions with a mouse or pointing device." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "click" }) }), ": Fires when an element is clicked (both ", _jsx(_components.code, { children: "mousedown" }), " and ", _jsx(_components.code, { children: "mouseup" }), " occur on the same element). Most commonly used for button clicks, link activations."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "dblclick" }) }), ": Fires when an element is double-clicked."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "mousedown" }) }), ": Fires when a mouse button is pressed down over an element."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "mouseup" }) }), ": Fires when a mouse button is released over an element."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "mouseover" }) }), ": Fires when the mouse pointer enters an element's area."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "mouseout" }) }), ": Fires when the mouse pointer leaves an element's area."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "mousemove" }) }), ": Fires continuously as the mouse pointer moves while it is over an element."] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Mouse Events", code: `

Click / Hover Me

Mouse event info will appear here.

`, language: "javascript", showConsole: true, editorHeight: 600, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "2. Keyboard Events" }), "\n", _jsx(_components.p, { children: "These events respond to user interactions with the keyboard." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "keydown" }) }), ": Fires when a key is pressed down. It fires repeatedly if the key is held down."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "keyup" }) }), ": Fires when a key is released."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "keypress" }) }), ": (Deprecated) Fires when a key that produces a character value is pressed down. Not recommended for modern use; use ", _jsx(_components.code, { children: "keydown" }), " or ", _jsx(_components.code, { children: "keyup" }), " with ", _jsx(_components.code, { children: "event.key" }), " for character values."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsxs(_components.strong, { children: ["Useful ", _jsx(_components.code, { children: "Event" }), " object properties for keyboard events:"] }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.key" }), ": The value of the key pressed (e.g., ", _jsx(_components.code, { children: "'a'" }), ", ", _jsx(_components.code, { children: "'Enter'" }), ", ", _jsx(_components.code, { children: "'ArrowUp'" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.code" }), ": The physical key pressed (e.g., ", _jsx(_components.code, { children: "'KeyA'" }), ", ", _jsx(_components.code, { children: "'Enter'" }), ", ", _jsx(_components.code, { children: "'ArrowUp'" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.altKey" }), ", ", _jsx(_components.code, { children: "event.ctrlKey" }), ", ", _jsx(_components.code, { children: "event.shiftKey" }), ", ", _jsx(_components.code, { children: "event.metaKey" }), ": Booleans indicating if modifier keys were pressed."] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Keyboard Events", code: `

Key press info will appear here.

`, language: "javascript", showConsole: true, editorHeight: 400, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "3. Form Events" }), "\n", _jsx(_components.p, { children: "These events are crucial for handling user input within forms." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "submit" }) }), ": Fires when a form is submitted. This event fires on the ", _jsx(_components.code, { children: "

" }), " element itself, not on the submit button. You often ", _jsx(_components.code, { children: "preventDefault()" }), " on this event to handle form submission via AJAX."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "input" }) }), ": Fires immediately when the value of an ", _jsx(_components.code, { children: "" }), ", ", _jsx(_components.code, { children: "

"
        }), " element is changed by the user. (Useful for real-time validation or display)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: _jsx(_components.code, {
            children: "change"
          })
        }), ": Fires when the value of an ", _jsx(_components.code, {
          children: "<input>"
        }), ", ", _jsx(_components.code, {
          children: "<select>"
        }), ", or ", _jsx(_components.code, {
          children: "<textarea>"
        }), " element is changed ", _jsx(_components.em, {
          children: "and"
        }), " the element loses focus (for text inputs) or when the selection is committed (for checkboxes, radio buttons, select dropdowns)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: _jsx(_components.code, {
            children: "focus"
          })
        }), ": Fires when an element (like an input field or button) receives focus."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: _jsx(_components.code, {
            children: "blur"
          })
        }), ": Fires when an element loses focus."]
      }), "\n"]
    }), "\n", _jsx(CodeEditor, {
      title: "Form Events",
      code: `
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Type username" style="margin-bottom: 5px;">
<br>
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback" rows="3" style="margin-bottom: 5px;">

Favorite Color:

Form event info will appear here.

`, language: "javascript", showConsole: true, editorHeight: 800, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "4. Document and Window Events" }), "\n", _jsx(_components.p, { children: "These events relate to the document as a whole or the browser window." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "DOMContentLoaded" }) }), ": Fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This is usually the best time to run your JavaScript code that modifies the DOM."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "load" }) }), ": Fires when the entire page has loaded, including all dependent resources such as stylesheets and images. Useful if your JavaScript relies on all assets being available."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "resize" }) }), ": Fires when the browser window has been resized."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "scroll" }) }), ": Fires when an element's scrollbar is being manipulated. Can be attached to ", _jsx(_components.code, { children: "window" }), " for page scroll or specific elements for their own scroll."] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Document & Window Events", code: `

Open console and resize the browser window or scroll down.

Scrollable Content

More content

End of scroll.

Window event info will appear here.

`, language: "javascript", showConsole: true, editorHeight: 700, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Exercise: Interactive Form Feedback" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Instructions:" }), "\nCreate a simple form with feedback based on common events."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n

\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Your Task:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Username Validation (Input Event):" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "regUsername" }), " and ", _jsx(_components.code, { children: "usernameFeedback" }), "."] }), "\n", _jsxs(_components.li, { children: ["Add an ", _jsx(_components.code, { children: "input" }), " event listener to ", _jsx(_components.code, { children: "regUsername" }), "."] }), "\n", _jsxs(_components.li, { children: ["Inside the listener: If the input's ", _jsx(_components.code, { children: "value.length" }), " is less than 5, set ", _jsx(_components.code, { children: "usernameFeedback.textContent" }), " to \"Username too short!\" and add ", _jsx(_components.code, { children: "error-message" }), " class. Otherwise, set it to \"Looks good!\" and remove ", _jsx(_components.code, { children: "error-message" }), " class."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Email Validation (Change Event):" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "regEmail" }), " and ", _jsx(_components.code, { children: "emailFeedback" }), "."] }), "\n", _jsxs(_components.li, { children: ["Add a ", _jsx(_components.code, { children: "change" }), " event listener to ", _jsx(_components.code, { children: "regEmail" }), "."] }), "\n", _jsxs(_components.li, { children: ["Inside the listener: If the input's ", _jsx(_components.code, { children: "value" }), " does not include ", _jsx(_components.code, { children: "\"@\"" }), " or ", _jsx(_components.code, { children: "\".\"" }), ", set ", _jsx(_components.code, { children: "emailFeedback.textContent" }), " to \"Invalid email format!\" and add ", _jsx(_components.code, { children: "error-message" }), " class. Otherwise, set it to \"Valid email.\" and remove ", _jsx(_components.code, { children: "error-message" }), " class."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Form Submission (Submit Event):" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "registrationForm" }), " and ", _jsx(_components.code, { children: "submissionStatus" }), "."] }), "\n", _jsxs(_components.li, { children: ["Add a ", _jsx(_components.code, { children: "submit" }), " event listener to ", _jsx(_components.code, { children: "registrationForm" }), "."] }), "\n", _jsxs(_components.li, { children: ["Inside the listener:", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "preventDefault()" }), " the default form submission."] }), "\n", _jsx(_components.li, { children: "Check if both username and email validations pass (you'll need to re-check their current values/classes)." }), "\n", _jsxs(_components.li, { children: ["If valid, set ", _jsx(_components.code, { children: "submissionStatus.textContent" }), " to \"Registration Successful!\" and style it green."] }), "\n", _jsxs(_components.li, { children: ["If invalid, set ", _jsx(_components.code, { children: "submissionStatus.textContent" }), " to \"Please fix errors before submitting.\" and style it red."] }), "\n"] }), "\n"] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Common Events: click, input, submit, and More", language: "javascript", showConsole: true, editorHeight: 1100, template: "vanilla", stack: true, code: `

Click / Hover Me

Mouse event info will appear here.

` })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Register