"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: ["Events & Event Handling: ", _jsx(_components.code, { children: "addEventListener()" })] }), "\n", _jsxs(_components.p, { children: ["Web pages aren't just static documents; they are interactive experiences. This interactivity is powered by ", _jsx(_components.strong, { children: "events" }), ". An event is something that happens in the browser that the browser ", _jsx(_components.em, { children: "tells you about" }), " so you can respond to it. Events can be user actions (like clicks, key presses, mouse movements, form submissions) or browser actions (like a page loading, an image loading, or a video playing)."] }), "\n", _jsxs(_components.p, { children: ["To make your JavaScript code respond to these events, you use ", _jsx(_components.strong, { children: "event handling" }), ". The most modern and recommended way to register event handlers in JavaScript is with the ", _jsx(_components.code, { children: "addEventListener()" }), " method."] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["1. What is ", _jsx(_components.code, { children: "addEventListener()" }), "?"] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "addEventListener()" }), " method attaches an event handler to a specified element. It allows you to define a function that will be executed when a particular event occurs on that element."] }), "\n", _jsxs(_components.h3, { children: ["Syntax: ", _jsx(_components.code, { children: "element.addEventListener(eventType, listenerFunction, options)" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "eventType" }), " (Required):"] }), " A string representing the type of event to listen for (e.g., ", _jsx(_components.code, { children: "'click'" }), ", ", _jsx(_components.code, { children: "'mouseover'" }), ", ", _jsx(_components.code, { children: "'submit'" }), ", ", _jsx(_components.code, { children: "'keydown'" }), "). Do ", _jsx(_components.strong, { children: "not" }), " include \"on\" prefix (e.g., use ", _jsx(_components.code, { children: "'click'" }), ", not ", _jsx(_components.code, { children: "'onclick'" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "listenerFunction" }), " (Required):"] }), " The function that will be called when the event occurs. This function is often called the \"event handler\" or \"callback function.\" It automatically receives an ", _jsx(_components.code, { children: "Event" }), " object as its first argument."] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "options" }), " (Optional):"] }), " An object that specifies characteristics about the event listener. Common options include:", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "capture" }), " (boolean):"] }), " ", _jsx(_components.code, { children: "true" }), " to indicate that events of this type will be dispatched to the registered listener before being dispatched to any ", _jsx(_components.code, { children: "EventTarget" }), " beneath it in the DOM tree. ", _jsx(_components.code, { children: "false" }), " (default) means the event bubbles up."] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "once" }), " (boolean):"] }), " ", _jsx(_components.code, { children: "true" }), " to indicate that the listener should be invoked at most once after being added. If ", _jsx(_components.code, { children: "true" }), ", the listener is automatically removed when invoked."] }), "\n", _jsxs(_components.li, { children: ["**", _jsxs(_components.strong, { children: [_jsx(_components.code, { children: "passive" }), " (boolean):"] }), " ", _jsx(_components.code, { children: "true" }), " to indicate that the listener will never call ", _jsx(_components.code, { children: "preventDefault()" }), ". This can improve scrolling performance, especially on mobile."] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "2. Attaching Event Listeners" }), "\n", _jsxs(_components.p, { children: ["Let's see ", _jsx(_components.code, { children: "addEventListener()" }), " in action with basic examples."] }), "\n", _jsx(CodeEditor, { title: "Basic addEventListener", code: `

Initial message.

Hover Over Me

`, language: "javascript", showConsole: true, editorHeight: 600, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["3. The ", _jsx(_components.code, { children: "Event" }), " Object"] }), "\n", _jsxs(_components.p, { children: ["When an event listener's function is called, it automatically receives an ", _jsx(_components.code, { children: "Event" }), " object as its first argument. This object contains a wealth of information about the event that just occurred, such as:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.type" }), ": The type of event (e.g., ", _jsx(_components.code, { children: "'click'" }), ", ", _jsx(_components.code, { children: "'input'" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.target" }), ": The DOM element that triggered the event."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.currentTarget" }), ": The DOM element to which the event listener was attached. (These can be different during event bubbling/capturing)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.preventDefault()" }), ": A method to stop the browser's default action for that event (e.g., preventing a form from submitting, a link from navigating)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.stopPropagation()" }), ": A method to stop the event from propagating further up or down the DOM tree (useful for event bubbling/capturing)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.keyCode" }), " / ", _jsx(_components.code, { children: "event.key" }), ": For keyboard events."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.clientX" }), " / ", _jsx(_components.code, { children: "event.clientY" }), ": For mouse events (coordinates)."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsxs(_components.em, { children: ["(We will cover ", _jsx(_components.code, { children: "preventDefault()" }), " and ", _jsx(_components.code, { children: "stopPropagation()" }), " in more detail in a dedicated lesson on the Event Object.)"] }) }), "\n", _jsx(CodeEditor, { title: "The Event Object", code: ` Clickable Link

Parent Div

`, language: "javascript", showConsole: true, editorHeight: 700, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["4. Removing Event Listeners: ", _jsx(_components.code, { children: "removeEventListener()" })] }), "\n", _jsx(_components.p, { children: "It's crucial to remove event listeners when they are no longer needed, especially in single-page applications. Failing to remove listeners can lead to memory leaks and unexpected behavior." }), "\n", _jsxs(_components.h3, { children: ["Syntax: ", _jsx(_components.code, { children: "element.removeEventListener(eventType, listenerFunction, options)" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Key Point:" }), " To successfully remove an event listener, the ", _jsx(_components.code, { children: "eventType" }), ", ", _jsx(_components.code, { children: "listenerFunction" }), ", and ", _jsx(_components.code, { children: "options" }), " (especially ", _jsx(_components.code, { children: "capture" }), ") passed to ", _jsx(_components.code, { children: "removeEventListener()" }), " ", _jsx(_components.strong, { children: "must be the exact same" }), " as those used when the listener was added. This means you generally cannot remove an anonymous function directly."] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Best Practice: Use Named Functions" }), "\n", _jsx(_components.p, { children: "Always use a named function (or a variable holding an arrow function) as your listener if you anticipate needing to remove it later." }), "\n", _jsx(CodeEditor, { title: "Removing Event Listeners", code: `

Click Log:

`, language: "javascript", showConsole: true, editorHeight: 900, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Exercise: Interactive Element Toggle" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Instructions:" }), "\nCreate an interactive element that changes its text, style, and behavior when clicked, and allows a \"reset\" to its initial state."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n

Click to Activate

\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: "Activate State:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "statusBox" }), " and ", _jsx(_components.code, { children: "resetButton" }), "."] }), "\n", _jsxs(_components.li, { children: ["Add a ", _jsx(_components.code, { children: "click" }), " listener to ", _jsx(_components.code, { children: "statusBox" }), "."] }), "\n", _jsxs(_components.li, { children: ["When clicked:", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Change its ", _jsx(_components.code, { children: "textContent" }), " to \"Active!\"."] }), "\n", _jsxs(_components.li, { children: ["Add the class ", _jsx(_components.code, { children: "active" }), "."] }), "\n", _jsxs(_components.li, { children: ["Remove the class ", _jsx(_components.code, { children: "warning" }), " (if present)."] }), "\n", _jsxs(_components.li, { children: ["Remove the ", _jsx(_components.code, { children: "click" }), " listener from ", _jsx(_components.code, { children: "statusBox" }), " after it's activated (using ", _jsx(_components.code, { children: "removeEventListener" }), ")."] }), "\n"] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Warning State (Initial click):" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Modify the ", _jsx(_components.code, { children: "statusBox" }), " click listener. On the ", _jsx(_components.em, { children: "first" }), " click, instead of \"Active!\", make it:", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Change ", _jsx(_components.code, { children: "textContent" }), " to \"Warning!\"."] }), "\n", _jsxs(_components.li, { children: ["Add the class ", _jsx(_components.code, { children: "warning" }), "."] }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Keep the listener active." }) }), "\n"] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Refined Activation:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["On the ", _jsx(_components.em, { children: "second" }), " click (when it's in \"Warning!\" state), change it to \"Active!\"."] }), "\n", _jsxs(_components.li, { children: ["This means the listener should ", _jsx(_components.em, { children: "not" }), " be removed after the first click. Instead, use a flag or check the current class."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Reset Button:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Add a ", _jsx(_components.code, { children: "click" }), " listener to ", _jsx(_components.code, { children: "resetButton" }), "."] }), "\n", _jsxs(_components.li, { children: ["When clicked:", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Reset ", _jsx(_components.code, { children: "statusBox.textContent" }), " to \"Click to Activate\"."] }), "\n", _jsxs(_components.li, { children: ["Remove all dynamic classes (", _jsx(_components.code, { children: "active" }), ", ", _jsx(_components.code, { children: "warning" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: ["Re-add the original ", _jsx(_components.code, { children: "click" }), " listener to ", _jsx(_components.code, { children: "statusBox" })] }), " so it can be activated again."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["Use a named function for the ", _jsx(_components.code, { children: "statusBox" }), " click listener so it can be removed and re-added."] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Interactive Element Toggle Exercise", language: "javascript", showConsole: true, editorHeight: 900, template: "vanilla", stack: true, code: `

Click to Activate

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