목차
- 이벤트 (event)
- 이벤트 등록
- 이벤트 객체의 특성
- 이벤트 전파
1. 이벤트 (event)
이벤트(event)는 웹페이지에서 상호작용으로 일어나는 사건을 의미합니다.
예시로는 마우스를 클릭하거나, 더블클릭하거나, 요소 위에 올릴 때를 말합니다.
HTML에서도 몇 번 써 봤죠?
DOM 객체는 발생한 이벤트 정보를 전달하여 처리하도록 합니다.
이벤트는 두 종류로 나누어져 있는데, 이벤트 리스너와와 핸들러입니다.
이벤트 리스너(event listener)는 이벤트를 감지하는 역할을 합니다.
이벤트가 일어난 순간에 지정된 함수를 호출합니다.
주로 이벤트의 앞에 on 접두사를 붙입니다.
이벤트 핸들러(event handler)는 이벤트 리스너에 연결되는 함수를 의미합니다.
이벤트 종류는 다음과 같습니다.
| 종류 | 이벤트 | 설명 |
| 마우스 | click | 문서 내의 요소를 클릭 |
| dbclick | 문서 내의 요소를 더블클릭 | |
| wheel | 휠 스크롤 시 | |
| mousedown | 마우스 버튼을 눌렀을 때 | |
| mousemove | 문서 내의 요소 위에서 이동시키는 동안 | |
| mouseup | 마우스 버튼을 뗐을 때 | |
| mouseover | 해당 요소 위에 올라갔을 때 | |
| mouseout | 해당 요소 위를 벗어날 때 | |
| 윈도우 | load | 해당 객체가 브라우저에 로드되었을 때 |
| resize | 창의 크기가 변형되었을 때 | |
| scroll | 창이 스크롤되었을 때 | |
| 키보드 | keypress | 키를 누르고 있는 동안 |
| keydown | 키를 눌렀을 때 | |
| keyup | 키를 뗼 때 | |
| 폼 | change | 입력값이 변경되었을 때 |
| focus | 요소에 포커스가 생겼을 때 | |
| blur | 요소에서 포커스가 사라졌을 때 | |
| select | 텍스트가 선택되었을 때 |
실제로는 수십 가지 이상의 이벤트가 존재합니다.
상황에 따라 적절히 선택해서 사용하도록 합시다.
2. 이벤트 등록
이벤트 리스너와 핸들러가 분리되어 있으니, 이를 처리하려면 이벤트 리스너와 핸들러를 연결해야 합니다.
이러한 행동을 이벤트 등록이라고 합니다.
방법은 세 가지가 있습니다.
1. HTML 이벤트 핸들러 속성
HTML 태그 안에 onclick같은 속성을 직접 쓰는 방법입니다.
추천되는 방법은 아닙니다. 코드에 HTML이랑 JS가 섞여서 유지보수 난이도가 올라갑니다.
2. DOM 이벤트 핸들러 속성
자바스크립트 내부에서 요소의 이벤트 속성에 함수를 할당합니다.
HTML과 JS가 분리되어 깔끔하지만, 같은 이벤트에는 하나만 등록이 가능하다는 단점이 있습니다.
3. addEventListener() 사용
가장 많이 사용되는 방법입니다. 일반적으로는 DOM 이벤트 핸들러와 동등하지만,
하나의 이벤트에 여러 핸들러가 등록이 가능합니다.
구조는 다음과 같습니다.
요소.addEventListener("이벤트 타입", 실행할 함수, 전파 타입)
전파 타입은 생략해도 됩니다. 생략된 전파 타입은 4. 이벤트 전파에서 알아볼 수 있습니다.
한번 알아봅시다!
<!DOCTYPE html>
<html>
<head>
<title>이벤트</title>
<style>
.box {
padding: 10px;
margin: 5px;
border: 1px solid skyblue;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>이벤트(event)</h2>
<div class="box">
<button onclick="alert('HTML 이벤트 핸들러를 실행합니다.')">클릭</button>
<button id="btn1">클릭</button>
<button id="btn2">클릭</button>
</div>
<script>
const btn1 = document.getElementById("btn1");
btn1.onclick = function() {
alert("DOM 이벤트 핸들러 실행");
}
const btn2 = document.getElementById("btn2");
btn2.addEventListener("click", run1);
btn2.addEventListener("click", run2);
function run1() {
alert("DOM 이벤트 핸들러 실행 1");
}
function run2() {
alert("DOM 이벤트 핸들러 실행 2");
}
</script>
</body>
</html>이벤트(event)
코드 구성은 다음과 같습니다.
빨간색은 HTML 이벤트 핸들러입니다.
노란색은 DOM 이벤트 핸들러 속성 방식입니다.
초록색은 addEventListener()을 사용한 것입니다.
여러 개의 핸들러는 오직 addEventListener()을 사용해야 합니다.
이때 해당 객체 내부의 함수에는 괄호() 를 붙이면 안됩니다.
괄호를 쓰면 즉시 실행됩니다,참조만 전달해야 합니다.
3. 이벤트 객체의 특성
이벤트 객체는 이벤트 그 자체(type)에 관한 정보만 담고 있지 않습니다.
이벤트 객체는 대상 요소 (target), 마우스 좌표, 키보드의 입력 값 등을 가지고 있습니다.
이러한 이벤트 객체에 매개변수를 연결하여 받을 수 있습니다.
보통은 event 또는 e로 정의됩니다.
<!DOCTYPE html>
<html>
<head>
<title>이벤트</title>
<style>
.box {
padding: 10px;
margin: 5px;
border: 1px solid skyblue;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>이벤트(event)</h2>
<div class="box">
<button id="btn">클릭</button>
</div>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", run);
function run(event) {
alert(`이벤트 종류: ${event.type}\n이벤트 요소: ${event.target.tagName}`);
}
</script>
</body>
</html>이벤트(event)
그림으로 보면 다음과 같습니다.
전파 서순은 다음과 같습니다.
아니, 사실 run(event)에서 화살표가 뻗어나가는게 더 직관적인데.. 이것도 틀리진 않았으니 그냥 봅시다.
이때, btn에서 이벤트가 발생하면 해당하는 이벤트 객체의 모든 정보를 다른 색에게 전파해준다는 것을 알아줍시다.
4. 이벤트 전파
음, 브라우저에서 이벤트가 발생했을 때, 이 이벤트가 어떤 순서로 DOM 요소 사이로 전달되는지 설명하는 개념이 전파입니다.
이벤트 전파(Event Propagation)이라고도 합니다.
방법은 안쪽(하위 요소)에서 바깥쪽(상위 요소)로 전파하는 법과,
바깥쪽(상위 요소) 에서 안쪽(하위 요소)로 전파되는 두 가지 방법이 있습니다.
이때, 안쪽에서 바깥으로 전파되는 것을 버블링이라고 하며 (풍선 터짐)
바깥쪽에서 안쪽으로 전파되는 것을 캡쳐링이라고 합니다. (사진찍기)
파란색 화살표가 캡쳐링입니다. 빨간색 화살표가 버블링입니다.
음...
트리를 포함 구조로 바꿔 볼까요?
원래 div의 이벤트는 빨간색 사각형이었습니다.
이때, h1로 전파되면 범위는 더 작아집니다. 캡쳐링입니다.
body로 전파되면 범위는 더 넓어집니다. 버블링입니다.
일반적으로, 대부분의 이벤트는 버블링 단계에서 실행됩니다.
요소.addEventListener("이벤트 타입", 실행할 함수, 전파 타입)
에서 전파 타입을 생략하거나, false를 사용하면 버블링으로 처리됩니다.
반대로 true로 설정하면 캡쳐링됩니다.
stopPropagation() 메서드를 이용해 이벤트 전파를 막을 수 있습니다.
'프로그래밍 > Html + CSS + JS' 카테고리의 다른 글
| 조건문 - 예제 모음 (0) | 2025.12.20 |
|---|---|
| 자바스크립트의 연산자 - 예제 모음 (0) | 2025.12.19 |
| 문서 객체 모델 (0) | 2025.12.13 |
| 사용자 객체 (0) | 2025.12.12 |
| 자바스크립트 객체 (0) | 2025.12.12 |
