DOM Event Listeners

Relevant source files

The following files were used as context for generating this wiki page:

• calculator.html
• README.md
• LICENSE
• .gitignore
• CNAME

Introduction

The Calculator application relies on a variety of DOM event listeners to facilitate user interaction through mouse clicks, keyboard inputs, and theme adjustments. These listeners bridge the gap between the Document Object Model (DOM) elements and the internal JavaScript logic, ensuring that user actions are translated into state changes and visual updates.

The event-driven architecture of the application handles input via three primary channels: a delegated click listener for the button grid, a global keydown listener for physical keyboard support, and specific listeners for utility functions like clearing history and toggling the application's visual theme.
Sources: calculator.html:437-515

Event Handling Architecture

Button Grid Delegation

The application utilizes event delegation for the main calculator interface. Instead of attaching individual listeners to every button, a single click event listener is attached to the .btn-grid container. This listener identifies the specific button clicked using e.target.closest('.btn') and dispatches logic based on the element's data-action attribute.

The flow above illustrates how a single listener manages all mathematical inputs and operations.
Sources: calculator.html:479-492

Keyboard Support

To enhance accessibility and desktop usability, a global keydown listener is attached to the document. This listener maps physical keys to the same logic functions used by the graphical buttons.

Key	Action	Function Called
0-9	Input Digit	inputDigit(key)
.	Decimal Point	inputDecimal()
+	Addition	handleOp('+')
-	Subtraction	handleOp('−')
*	Multiplication	handleOp('×')
/	Division	handleOp('÷')
Enter / =	Calculate	handleEquals()
Escape	All Clear	handleClear()
Backspace	Delete Last Digit	Custom inline logic

Sources: calculator.html:495-510

Specific Component Listeners

History Management

The history section features two distinct types of interaction listeners:

1. Clear History: A direct click listener on the clearHistory button that resets the internal history array and triggers a re-render.
2. History Item Recall: Dynamically generated listeners within the renderHistory() function. Each item receives a click listener to recall results to the display and a keydown listener for keyboard navigation (Enter key).

The interaction flow for recalling a previous calculation from the history list.
Sources: calculator.html:453-477, calculator.html:474-477

Theme Toggle

The application includes an IIFE (Immediately Invoked Function Expression) that initializes and manages a theme toggle listener. This listener swaps the data-theme attribute on the html element between 'light' and 'dark', while simultaneously updating the inner SVG icon and ARIA labels.
Sources: calculator.html:513-524

Summary of Logic Dispatch

All event listeners ultimately interact with a set of core state-management functions that control the application's behavior.

• State Variables: current, previous, operator, shouldReset, and history.
• Logic Functions:
  • inputDigit(d): Handles numeric entry and display updates.
  • handleOp(op): Processes operator selection and chain calculations.
  • handleEquals(): Finalizes the current expression and saves to history.
  • renderHistory(): Manages the DOM representation of previous calculations.

Sources: calculator.html:359-451

Conclusion

DOM Event Listeners in the Calculator project are implemented with a focus on efficiency and accessibility. By using event delegation for the button grid and providing comprehensive keyboard mappings, the system ensures a responsive user experience across different input methods while maintaining a clean separation between DOM events and mathematical logic.