docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합

이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영. - Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들 (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거. - Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/ Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/ Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이 존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존). - Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/ JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동. - 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리. - Topic_Programming 최종 문서 수: 2784 → 3985.
2026-07-05 00:39:13 +09:00
parent 9148c358d0
commit e9cbf23ab5
1356 changed files with 0 additions and 12831 deletions
@@ -0,0 +1,140 @@
+---
+id: javascript-html-events
+title: "JavaScript HTML Events"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["HTML events", "onclick", "onload", "event handlers", "JavaScript events"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.88
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["javascript", "js", "web", "frontend", "w3schools", "dom"]
+raw_sources: ["https://www.w3schools.com/js/js_events.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[JavaScript HTML Events]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+HTML events are things that happen to HTML elements, and JavaScript event handlers are the code that runs when those events occur. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **An event handler is code that runs on an event** — an event handler is JavaScript code that runs when an event happens. [S1]
+- **Events can call a function** — an event attribute can run JavaScript inline or call a named function. [S1]
+- **`this` refers to the element** — inside an inline handler, `this` refers to the element that received the event. [S1]
+- **addEventListener is the recommended approach** — attaching handlers with `addEventListener()` keeps JavaScript separate from the HTML markup. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Inline handler** — `onclick="..."` runs JavaScript directly in the HTML attribute. [S1]
+- **Function call handler** — `onclick="displayDate()"` delegates to a named function. [S1]
+- **Listener handler** — `element.addEventListener("click", fn)` attaches behavior from script. [S1]
+
+## 📖 세부 내용 (Details)
+**HTML Events** [S1]
+An HTML event can be something the browser does, or something a user does. JavaScript lets you execute code when events are detected. [S1]
+
+**JavaScript Events / Calling a JavaScript Function** [S1]
+A basic `onclick` handler running JavaScript inline: [S1]
+```html
+<button onclick="document.getElementById('demo').innerHTML = Date()">
+  The time is?
+</button>
+```
+Using `this` to refer to the element itself: [S1]
+```html
+<button onclick="this.innerHTML = Date()">The time is?</button>
+```
+Calling a named function from the handler: [S1]
+```html
+<button onclick="displayDate()">The time is?</button>
+
+<script>
+function displayDate() {
+  document.getElementById("demo").innerHTML = Date();
+}
+</script>
+```
+
+**Common HTML Events** [S1]
+
+| Event | Description |
+|-------|-------------|
+| `onchange` | An HTML element has been changed |
+| `onclick` | The user clicks an HTML element |
+| `onmouseover` | The user moves the mouse over an HTML element |
+| `onmouseout` | The user moves the mouse away from an HTML element |
+| `onkeydown` | The user pushes a keyboard key |
+| `onload` | The browser has finished loading the page |
+
+**JavaScript Event Handlers** [S1]
+An event handler is JavaScript code that runs when an event happens. [S1]
+
+**Using an Event Listener** [S1]
+The recommended way to attach a handler from script is `addEventListener()`: [S1]
+```html
+<button id="myBtn">Click me</button>
+<p id="demo"></p>
+
+<script>
+const btn = document.getElementById("myBtn");
+btn.addEventListener("click", function () {
+  document.getElementById("demo").innerHTML = Date();
+});
+</script>
+```
+
+## 🛠️ 적용 사례 (Applied in summary)
+The page's snippets — `onclick` writing `Date()`, `this.innerHTML`, a `displayDate()` function, and an `addEventListener("click", ...)` handler — are the canonical applied examples. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Inline handler (language: HTML):
+```html
+<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
+```
+Function-call handler (language: HTML/JavaScript):
+```html
+<button onclick="displayDate()">The time is?</button>
+<script>
+function displayDate() {
+  document.getElementById("demo").innerHTML = Date();
+}
+</script>
+```
+Event listener (language: JavaScript):
+```javascript
+const btn = document.getElementById("myBtn");
+btn.addEventListener("click", function () {
+  document.getElementById("demo").innerHTML = Date();
+});
+```
+
+## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
+- Use **inline `on*` attributes** for quick, simple handlers written directly in the HTML. [S1]
+- Use **`addEventListener()`** when you want the JavaScript separated from the HTML markup for better readability and to attach multiple handlers. [S1]
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source.
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.88
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[JavaScript Tutorial]]
+- **관련 개념:** [[JavaScript DOM Event Listener]], [[JavaScript DOM Changing CSS]], [[JavaScript DOM Changing HTML]], [[JavaScript HTML DOM]]
+- **참조 맥락:** The event layer that triggers DOM content and style changes in response to user/browser actions.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — JavaScript HTML Events — https://www.w3schools.com/js/js_events.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript HTML Events" page (Astra wiki-curation, P-Reinforce v3.1 format).