2nd/10_Wiki/Dev/Topic_JavaScript/JavaScript_Events.md

---
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).