[JS] 이벤트(Event) 완벽 정리 + Event Type과 Event Object

JavaScript에서 이벤트(event)는 사용자가 웹 페이지와 상호작용할 때 발생하는 다양한 사건을 의미한다. 예를 들어, 버튼 클릭, 마우스 이동, 키보드 입력, 페이지 로드 등이 모두 이벤트에 해당한다. 이러한 이벤트를 감지하고 적절히 반응함으로써 웹 페이지는 동적으로 작동할 수 있다.

 

 

 

---

1. Event Type (이벤트 타입)

Event Type은 사용자의 행동이나 브라우저 상태 변화 등으로 인해 발생한 이벤트의 종류를 나타낸다. 올바른 이벤트 타입을 선택하면 사용자와의 상호작용을 보다 효과적으로 처리할 수 있다.

 

1) 마우스 이벤트(Mouse Event)

• click: 마우스를 클릭할 때 발생한다. 버튼, 링크 등에서 주로 사용된다.

• dblclick: 더블 클릭할 때 발생한다.

• mousedown: 마우스 버튼을 누를 때 발생한다.

• mouseup: 마우스 버튼을 뗄 때 발생한다.

• mousemove: 마우스를 이동할 때 발생한다.

• mouseover: 마우스가 요소 위에 올라갔을 때 발생한다.

• mouseout: 마우스가 요소에서 벗어났을 때 발생한다.

const button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});

 

2) 키보드 이벤트(Keyboard Event)

• keydown: 키보드를 누를 때 발생한다.

• keyup: 키보드에서 손을 뗄 때 발생한다.

• keypress: 키보드를 눌렀을 때 발생하지만, 최근에는 keydown, keyup을 주로 사용한다.

document.addEventListener('keydown', function(event) {
    console.log('눌린 키:', event.key);
});

 

3) 입력 및 폼 이벤트(Input and Form Event)

• input: 사용자가 입력 필드에 값을 입력할 때 발생한다.

• change: 입력 내용이 변경된 후 포커스를 잃을 때 발생한다.

• submit: 폼 제출 시 발생한다.

• focus: 요소가 포커스를 받을 때 발생한다.

• blur: 요소가 포커스를 잃을 때 발생한다.

 

const input = document.querySelector('input');
input.addEventListener('input', function(event) {
    console.log('현재 입력 값:', event.target.value);
});

 

포커스란 무엇인가?

[JS] 포커스(Focus)란 무엇인가?

 

4) 문서 및 윈도우 이벤트(Document and Window Event)

• load: 문서가 모두 로드되었을 때 발생한다.

• resize: 브라우저 창 크기가 변경될 때 발생한다.

• scroll: 사용자가 스크롤할 때 발생한다.

• unload: 사용자가 페이지를 떠날 때 발생한다.

window.addEventListener('resize', function() {
    console.log('창 크기가 변경되었습니다.');
});

 

 

 

---

2. Event Object (이벤트 객체)

Event Object는 이벤트가 발생했을 때 자동으로 생성되는 객체로, 이벤트에 대한 다양한 정보를 담고 있다. 이벤트 핸들러 함수의 첫 번째 인자로 전달되며, 이를 통해 이벤트 세부 정보를 확인하고 제어할 수 있다.

 

주요 프로퍼티와 메서드

1. type: 발생한 이벤트의 타입을 나타낸다.

• 예: click, keydown, submit 등

element.addEventListener('click', function(event) {
    console.log(event.type);  // 'click'
});

 

2. target: 이벤트가 발생한 DOM 요소를 가리킨다.

• 예: 클릭한 버튼, 입력한 텍스트 필드

element.addEventListener('click', function(event) {
    console.log(event.target);  // 클릭된 요소
});

 

DOM이란 무엇인가?

[HTTP] 브라우저(Browser)의 작동원리와 DOM(Document Object Model)

 

3. preventDefault(): 이벤트의 기본 동작을 막는다.

• 예: 링크 클릭 시 페이지 이동 방지, 폼 제출 방지

document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault();  // 링크 이동 방지
    alert('링크 이동이 방지되었습니다.');
});

 

4. stopPropagation(): 이벤트가 상위 요소로 전파되지 않도록 막는다.

• 이벤트 버블링을 방지하는 데 사용된다.

child.addEventListener('click', function(event) {
    event.stopPropagation();
});

 

버블링이란 무엇인가?

[JS] 캡처링(Capturing)과 버블링(Bubbling)

 

 

5. key: 키보드 이벤트에서 눌린 키의 값을 반환한다.

• 예: a, Enter, Escape

 

6. clientX, clientY: 마우스 이벤트에서 마우스 포인터의 위치를 반환한다. (브라우저 창 기준)

 

 

 

---

3. Event 사용 예시

 

예시 1: click 이벤트와 event.type, event.target

document.querySelector('button').addEventListener('click', function(event) {
    console.log('이벤트 타입:', event.type);  // 'click'
    console.log('이벤트 대상:', event.target);  // 클릭한 버튼 요소
});

 

• event.type은 이벤트 타입(click)을 반환한다.

• event.target은 이벤트가 발생한 대상(DOM 요소)을 반환한다.

 

---

 

예시 2: keydown 이벤트와 event.key, preventDefault()

document.addEventListener('keydown', function(event) {
    console.log('눌린 키:', event.key);  // 눌린 키 값 (예: 'a', 'Enter')
    
    // Enter 키가 눌렸을 때 기본 동작 방지
    if (event.key === 'Enter') {
        event.preventDefault();
        alert('Enter 키가 눌렸지만 폼 제출은 방지되었습니다.');
    }
});

 

• event.key는 눌린 키의 값을 반환한다.

• event.preventDefault()는 Enter 키의 기본 동작(폼 제출)을 막는다.

 

---

 

예시 3: mouseover 이벤트와 stopPropagation()

document.querySelector('.parent').addEventListener('mouseover', function(event) {
    console.log('부모 요소에 마우스 오버');
});

document.querySelector('.child').addEventListener('mouseover', function(event) {
    event.stopPropagation();
    console.log('자식 요소에 마우스 오버');
});

 

• event.stopPropagation()을 사용하면 이벤트가 상위 요소로 전파되지 않는다.

• 자식 요소에 마우스를 올리면 부모 요소의 mouseover 이벤트가 발생하지 않는다.

 

 

 

---

3. Event Listener (이벤트 리스너)

Event Listener는 특정 이벤트가 발생했을 때 실행될 함수를 정의하고 해당 이벤트를 감지하는 역할을 한다. 이벤트가 발생하기 전까지 대기하고 있으며, 이벤트가 발생하면 미리 정의한 함수가 실행된다.

 

addEventListener() 메서드

JavaScript에서는 주로 addEventListener() 메서드를 사용해 이벤트 리스너를 등록한다.

element.addEventListener(eventType, eventHandler, useCapture);

 

• eventType: 감지할 이벤트의 타입 (예: ‘click’, ‘keydown’, ‘input’ 등)

• eventHandler: 이벤트 발생 시 실행할 함수

• useCapture: (선택) 이벤트 캡처링 단계에서 실행할지 여부 (true 또는 false, 기본값은 false)

 

const button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('클릭 이벤트가 감지되었습니다.');
});

 

---

 

이벤트 삭제하기

등록된 이벤트 리스너를 삭제하려면 removeEventListener() 메서드를 사용한다.

단, 익명 함수로 등록한 리스너는 삭제할 수 없으므로 반드시 함수 선언식이나 변수에 할당된 함수를 사용해야 한다.

function showAlert() {
    alert('이벤트 발생!');
}

button.addEventListener('click', showAlert);
button.removeEventListener('click', showAlert);

 

---

 

캡처링과 버블링

• 캡처링 (Capturing): 이벤트가 최상위 부모 요소부터 시작해 하위 자식 요소로 전파된다.

• 버블링 (Bubbling): 이벤트가 발생한 요소에서 시작해 상위 부모 요소로 전파된다. (기본 동작)

 

캡처링, 버블링이란 무엇인가?

[JS] 캡처링(Capturing)과 버블링(Bubbling)

 

캡처링을 사용하고 싶다면 addEventListener() 메서드의 세 번째 인자에 true를 전달하면 된다.

 

parent.addEventListener('click', function() {
    console.log('부모 요소 클릭');
}, true);  // Capturing Phase

 

 

 

---

4. 정리

• Event Type은 발생한 이벤트의 종류를 나타내며, click, keydown, mouseover 등 다양한 타입이 있다.

• Event Object는 이벤트 발생 시 전달되는 객체로, event.type, event.target, event.preventDefault() 등의 프로퍼티와 메서드를 통해 이벤트에 대한 세부 정보를 확인하고 제어할 수 있다.

• Event Listener는 addEventListener() 메서드를 사용해 이벤트를 감지하고 반응하며, removeEventListener()로 삭제할 수 있다.

• 캡처링과 버블링 개념을 통해 이벤트의 전파 과정을 이해하고 제어할 수 있다.