Event Handler and Event Listener

이벤트가 발생했을 때 그 동작을 실행시키는 장치인 이벤트 처리기에 대해 알아보겠습니다.

이벤트를 처리하는 방법은 크게 두 가지 방식이 있으며, 각각의 특징을 이해하는 것이 중요합니다.

---

1. 이벤트 핸들러 (Event Handler)

이벤트 핸들러는 HTML 요소의 속성이나 자바스크립트 객체의 프로퍼티에 직접 함수를 연결하는 방식입니다.

• 특징: 가장 고전적인 방식이며, 구현이 매우 단순합니다.
• 단점: 하나의 이벤트에 오직 하나의 함수만 연결할 수 있습니다. 새로운 함수를 할당하면 기존의 함수는 덮어씌워져 사라집니다.

① HTML 속성에 지정 (인라인 방식)

HTML 태그 안에 직접 이벤트 속성을 적어주는 방식입니다.

HTML

 

<button onclick="alert('클릭됨!')">버튼</button>

② DOM 프로퍼티에 지정

자바스크립트 코드 내에서 요소의 프로퍼티로 접근하여 할당하는 방식입니다.

JavaScript

 

const btn = document.querySelector('button');
btn.onclick = function() {
    console.log("첫 번째 실행");
};
// 나중에 작성된 이 함수가 기존의 "첫 번째 실행"을 덮어버립니다.
btn.onclick = function() {
    console.log("두 번째 실행");
};

---

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

이벤트 리스너는 특정 요소에서 이벤트가 발생하는지 '귀를 기울여 기다리다가' 실행하는 현대적이고 권장되는 방식입니다.

• 메서드: addEventListener('이벤트종류', 함수)를 사용합니다.
• 특징: 하나의 요소에 여러 개의 함수를 등록할 수 있어 유지보수와 협업에 유리합니다.

🖥️ 이벤트 리스너 예제 코드

JavaScript

 

const btn = document.querySelector('button');

// 첫 번째 리스너 등록
btn.addEventListener('click', () => {
    console.log("첫 번째 동작 실행");
});

// 두 번째 리스너 등록 (덮어씌워지지 않고 둘 다 실행됩니다)
btn.addEventListener('click', () => {
    console.log("두 번째 동작 실행");
});

---

📋 이벤트 핸들러 vs 이벤트 리스너 비교

구분	이벤트 핸들러 (on- 방식)	이벤트 리스너 (addEventListener)
연결 방식	요소의 프로퍼티에 직접 대입	메서드를 통해 함수를 추가 등록
중복 등록	불가능 (마지막 것만 실행)	가능 (등록한 순서대로 모두 실행)
제거 방법	btn.onclick = null;	removeEventListener() 사용
사용 권장	간단한 테스트 시 사용	실제 웹 개발 시 표준 사용

---

학습 정리

• 이벤트 핸들러는 쉽고 간편하지만, 여러 기능을 동시에 연결하기 어렵다는 한계가 있다.
• 이벤트 리스너는 현대 자바스크립트의 표준이며, 코드의 확장성과 안전성을 위해 반드시 익혀야 한다.
• HTML 코드 안에 직접 자바스크립트를 적는 인라인 방식은 가급적 피하는 것이 좋다.

---

이벤트 처리의 두 가지 큰 줄기를 모두 정리하셨습니다!

---