"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", template: "vanilla" }), "\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: "

\n\n MDN Link (Prevent Default)\n\n\n \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", template: "vanilla" })] }); } 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."); }