✅ 오늘 한 일
[모던 자바스크립트 Deep Dive] 40장 이벤트 정리
🌳 이벤트(Event)
이벤트는 브라우저가 감지하는 특정 사건이다.
예) 클릭, 키보드 입력, 마우스 이동 등
브라우저는 이벤트 발생 시 이를 감지하고 이벤트 핸들러를 호출할 수 있다.
이벤트 핸들러: 이벤트가 발생했을 때 실행할 함수
이벤트 핸들러 등록: 브라우저에게 "이벤트 발생 시 이 함수를 실행해!"라고 알려주는 것
👉 핵심 개념
개발자는 이벤트가 언제 발생할지 모르기 때문에 대신 브라우저가 이벤트를 감지하고, 이벤트 발생 시 함수 호출을 대신 처리한다. 이를 통해 특정 요소에서 발생하는 이벤트에 반응할 수 있다.
button.addEventListener("click", () => {
alert("버튼 클릭!");
});브라우저는 버튼 클릭을 감지하고, 클릭 시 등록된 함수를 실행한다.
🍀 이벤트 타입
이벤트 타입은 이벤트의 종류를 나타내는 문자열이다.
예) 이벤트 타입 "click"은 사용자가 마우스 버튼을 클릭했을 때 발생하는 이벤트를 나타낸다.
이벤트 타입으로는 약 200여 가지가 있기 때문에 MDN에서 확인하기-!
🍀 이벤트 핸들러 등록
이벤트 핸들러는 이벤트가 발생했을 때 브라우저에게 호출을 위임한 함수다. 다시 말해, 이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러이다.
이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다.
이벤트 핸들러를 등록하는 방법은 3가지가 있다-!!
✅ 1. 이벤트 핸들러 어트리뷰트 방식
HTML 요소에 직접 이벤트 핸들러 속성(attribute)을 추가하여 함수를 연결하는 방식
🔑 핵심 개념
- HTML 태그에 onclick, onchange 같은 속성을 사용해 이벤트를 설정한다.
- 코드가 HTML에 직접 포함되므로 유지보수가 어렵다는 단점이 있다.
<button onclick="alert('버튼 클릭!')">Click me</button>✅ 2. 이벤트 핸들러 프로퍼티 방식
자바스크립트에서 요소의 이벤트 속성(property) 에 함수를 직접 할당하는 방식
🔑 핵심 개념
- DOM 요소의 프로퍼티(onclick, onchange)에 이벤트 핸들러를 할당한다.
- 기존 이벤트 핸들러가 덮어쓰여질 수 있어 중복 등록이 불가능하다.
const button = document.querySelector('button');
button.onclick = function() {
alert('버튼 클릭!');
};✅ 3. addEventListener 메서드 방식
addEventListener 메서드를 사용하여 이벤트 핸들러를 등록하는 방식
🔑 핵심 개념
- 동일한 이벤트에 여러 개의 핸들러를 등록할 수 있다.
- 이벤트 제거(removeEventListener)가 가능하다.
- 가장 권장되는 방식이다.
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('버튼 클릭!');
});✅ 내일 할 일
[모던 자바스크립트 Deep Dive] 40장 이벤트 이어서 정리하기
