"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: ["Event Object: ", _jsx(_components.code, { children: "preventDefault()" }), ", ", _jsx(_components.code, { children: "stopPropagation()" }), ", and ", _jsx(_components.code, { children: "target" }), " vs. ", _jsx(_components.code, { children: "currentTarget" })] }), "\n", _jsxs(_components.p, { children: ["When an event occurs in the browser (e.g., a click, a keypress, a form submission), JavaScript's event listener callback function automatically receives an ", _jsxs(_components.strong, { children: [_jsx(_components.code, { children: "Event" }), " object"] }), " as its first argument. This ", _jsx(_components.code, { children: "Event" }), " object is a powerful tool, carrying all the necessary information about the event that just happened."] }), "\n", _jsxs(_components.p, { children: ["Beyond just information, the ", _jsx(_components.code, { children: "Event" }), " object also provides methods that allow you to control the event's default browser behavior and its propagation through the DOM."] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["1. The ", _jsx(_components.code, { children: "Event" }), " Object: Your Event's Blueprint"] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "Event" }), " object contains various properties that describe the event:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "type" }) }), ": The name of the event (e.g., ", _jsx(_components.code, { children: "'click'" }), ", ", _jsx(_components.code, { children: "'input'" }), ", ", _jsx(_components.code, { children: "'submit'" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "target" }) }), ": The ", _jsx(_components.em, { children: "actual" }), " DOM element that originally triggered the event (where the event ", _jsx(_components.em, { children: "originated" }), "). This is the deepest element in the DOM tree that the event occurred on."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "currentTarget" }) }), ": The DOM element to which the event listener was attached. This is the element that the event ", _jsx(_components.em, { children: "is currently bubbling through" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "timeStamp" }), ": The time the event occurred (in milliseconds since page load)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "isTrusted" }), ": A boolean indicating if the event was generated by a user action (", _jsx(_components.code, { children: "true" }), ") or by a script (", _jsx(_components.code, { children: "false" }), ")."] }), "\n", _jsxs(_components.li, { children: ["Properties specific to event type (e.g., ", _jsx(_components.code, { children: "clientX" }), ", ", _jsx(_components.code, { children: "clientY" }), " for mouse events; ", _jsx(_components.code, { children: "key" }), ", ", _jsx(_components.code, { children: "code" }), " for keyboard events)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Understanding ", _jsx(_components.code, { children: "target" }), " vs. ", _jsx(_components.code, { children: "currentTarget" }), " is particularly important for techniques like event delegation (covered in the next lesson), but it's vital to grasp their difference here."] }), "\n", _jsx(CodeEditor, { title: "Event Object Properties", language: "javascript", showConsole: true, editorHeight: 450, template: "vanilla", stack: true, code: `

Parent Div

` }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["2. ", _jsx(_components.code, { children: "event.preventDefault()" }), ": Stopping Default Browser Actions"] }), "\n", _jsx(_components.p, { children: "Many HTML elements have default behaviors associated with certain events:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Clicking an ", _jsx(_components.code, { children: "" }), " tag: Navigates to the ", _jsx(_components.code, { children: "href" }), " URL."] }), "\n", _jsxs(_components.li, { children: ["Submitting a ", _jsx(_components.code, { children: "

" }), ": Reloads the page (or navigates to the ", _jsx(_components.code, { children: "action" }), " URL)."] }), "\n", _jsx(_components.li, { children: "Clicking a checkbox: Toggles its checked state." }), "\n", _jsx(_components.li, { children: "Pressing a spacebar while focused on a button: Clicks the button." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "event.preventDefault()" }), " method stops these default browser actions from occurring."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " To prevent the browser's default behavior for a specific event, allowing you to implement your own custom logic instead."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Syntax:" }), " ", _jsx(_components.code, { children: "event.preventDefault();" }), " (called inside the event listener function)"] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Using event.preventDefault()", code: ` Click this link (will NOT navigate)

Click to toggle (will NOT check)

`, language: "javascript", showConsole: true, editorHeight: 600, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "3. Event Propagation: Bubbling and Capturing" }), "\n", _jsxs(_components.p, { children: ["Before understanding ", _jsx(_components.code, { children: "stopPropagation()" }), ", it's crucial to know about event propagation:"] }), "\n", _jsx(_components.p, { children: "When an event occurs on an element (e.g., a button inside a div), that event doesn't just happen on the button. It goes through two phases:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Capturing Phase:" }), " The event starts from the ", _jsx(_components.code, { children: "window" }), ", travels down the DOM tree through ancestor elements to the ", _jsx(_components.code, { children: "target" }), " element."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Bubbling Phase:" }), " The event then \"bubbles up\" from the ", _jsx(_components.code, { children: "target" }), " element through its ancestors back to the ", _jsx(_components.code, { children: "window" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Most events (like ", _jsx(_components.code, { children: "click" }), ", ", _jsx(_components.code, { children: "input" }), ", ", _jsx(_components.code, { children: "submit" }), ") bubble by default. Event listeners typically listen during the bubbling phase unless the ", _jsx(_components.code, { children: "capture: true" }), " option is set in ", _jsx(_components.code, { children: "addEventListener()" }), "."] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["4. ", _jsx(_components.code, { children: "event.stopPropagation()" }), ": Halting Event Propagation"] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "event.stopPropagation()" }), " method prevents the event from continuing to propagate through the DOM tree. It stops the event from either bubbling up to ancestor elements or capturing down to descendant elements (depending on which phase the listener is in)."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " To prevent an event from triggering listeners on parent/child elements when it originates from a specific element."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Syntax:" }), " ", _jsx(_components.code, { children: "event.stopPropagation();" }), " (called inside the event listener function)"] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Using event.stopPropagation()", code: `

Grandparent

Parent

`, language: "javascript", showConsole: true, editorHeight: 550, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["5. ", _jsx(_components.code, { children: "event.stopImmediatePropagation()" }), " (Advanced)"] }), "\n", _jsxs(_components.p, { children: ["While ", _jsx(_components.code, { children: "stopPropagation()" }), " stops bubbling/capturing, ", _jsx(_components.code, { children: "stopImmediatePropagation()" }), " does that AND prevents any ", _jsx(_components.em, { children: "other" }), " listeners on the ", _jsx(_components.em, { children: "same" }), " element from being called. This is rarely needed but can be useful in specific complex scenarios where multiple listeners are attached to one element and you want only the first one to run under certain conditions."] }), "\n", _jsx(CodeEditor, { title: "Using event.stopImmediatePropagation()", code: `

`, language: "javascript", showConsole: true, editorHeight: 600, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Exercise: Controlled Event Behavior" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Instructions:" }), "\nImplement the following event behaviors to practice ", _jsx(_components.code, { children: "preventDefault()" }), " and ", _jsx(_components.code, { children: "stopPropagation()" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n

\n Outer Box\n

\n Inner Box\n \n

\n\nMDN Link (Prevent Default)\n\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: "Prevent Link Navigation:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "linkToPrevent" }), "."] }), "\n", _jsxs(_components.li, { children: ["Add a ", _jsx(_components.code, { children: "click" }), " event listener to it."] }), "\n", _jsxs(_components.li, { children: ["Inside the listener, use ", _jsx(_components.code, { children: "event.preventDefault()" }), " to stop the link from navigating."] }), "\n", _jsxs(_components.li, { children: ["Log a message to ", _jsx(_components.code, { children: "eventOutput" }), " confirming the navigation was prevented."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Stop Propagation:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "outerBox" }), ", ", _jsx(_components.code, { children: "innerBox" }), ", and ", _jsx(_components.code, { children: "stopButton" }), "."] }), "\n", _jsxs(_components.li, { children: ["Add ", _jsx(_components.code, { children: "click" }), " listeners to ", _jsx(_components.em, { children: "all three" }), " elements."] }), "\n", _jsx(_components.li, { children: "Each listener should log its own element's ID (e.g., \"Outer box clicked!\")." }), "\n", _jsxs(_components.li, { children: ["Inside the ", _jsx(_components.code, { children: "stopButton" }), "'s click listener, use ", _jsx(_components.code, { children: "event.stopPropagation()" }), "."] }), "\n", _jsxs(_components.li, { children: ["Test by clicking ", _jsx(_components.code, { children: "stopButton" }), ", then ", _jsx(_components.code, { children: "innerBox" }), ", then ", _jsx(_components.code, { children: "outerBox" }), " and observe the console/output."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Prevent Form Submission:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "searchForm" }), "."] }), "\n", _jsxs(_components.li, { children: ["Add a ", _jsx(_components.code, { children: "submit" }), " event listener to it."] }), "\n", _jsxs(_components.li, { children: ["Inside the listener, use ", _jsx(_components.code, { children: "event.preventDefault()" }), " to stop the form from reloading the page."] }), "\n", _jsxs(_components.li, { children: ["Log a message to ", _jsx(_components.code, { children: "eventOutput" }), " indicating the form was \"submitted\" (without reload) and show the input value."] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Controlled Event Behavior Exercise", language: "javascript", showConsole: true, editorHeight: 1100, template: "vanilla", stack: true, code: `

Outer Box

Inner Box

MDN Link (Prevent Default)

` })] }); } 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."); }