docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 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).