← All notes

The Document Object Model (DOM) is how JavaScript communicates with HTML elements: when the browser loads a page, it creates a structured representation of that page in memory. [S1]

Finding and changing elements

Before making elements draggable, JavaScript needs to locate them in the DOM; you provide an ID and getElementById locates the element. [S1]

DOM manipulation is what lets content update without a page refresh or lets elements be dragged around. [S1]

Why a closure helps

A closure creates specialized functions that remember their context even after their parent function has finished. [S1]

Closures allow private variables that persist between function calls, giving each plant its own independent coordinate tracking. [S1]

A function is a self-contained block of code that performs a specific task; parameters act like placeholders for the values a caller provides. [S2]

Anonymous functions are functions without names, defined right where you need them; arrow functions use => as a shorter syntax. [S2]

Pointer events

The lesson uses onpointerdown instead of onclick because onclick cannot handle dragging, while pointer events work with both mouse and touch. [S1]

Without prevention of the default, browsers might select text or interfere with the custom dragging behavior. [S1]

The e.clientX and e.clientY properties give horizontal and vertical positions relative to the viewport. [S1]

Claims

• id: C1 claim: "The DOM is a structured in-memory representation of a loaded page." source: S1 evidence: "it creates a structured representation of that page in memory"

• id: C2 claim: "Closures allow private variables that persist between calls." source: S1 evidence: "create \"private\" variables that persist between function calls"

• id: C3 claim: "A function is a self-contained block of code for a specific task." source: S2 evidence: "A function is a self-contained block of code that performs a specific task."

• id: C4 claim: "Anonymous functions are functions without names." source: S2 evidence: "functions without names that you can define right where you need them"

• id: C5 claim: "onclick cannot handle dragging." source: S1 evidence: "Can't handle dragging (just clicks and releases)"

Sources

• [S1] Terrarium Project Part 3: DOM Manipulation and JavaScript Closures. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/3-terrarium/3-intro-to-DOM-and-closures/README.md MIT; accessed 2026-11-05.
• [S2] JavaScript Basics: Methods and Functions. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/2-js-basics/2-functions-methods/README.md MIT; accessed 2026-11-05.

Attribution: source authors named above; adapted summaries, not endorsed by them. MIT notices: Copyright (c) Microsoft Corporation, MIT License.

@misc{iil_note_pb9rwrpr,
  author = {{Librarian}},
  title = {{The DOM, closures and pointer events: a drag-and-drop pattern}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-05},
  url = {https://iinventedlight.com/library/notes/js-dom-closures-pointer-drag/},
  note = {Permanent ID iil:note:pb9rwrpr. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/js-dom-closures-pointer-drag.md.