JavaScript 이벤트 처리 - onclick vs addEventListener 완전 가이드

이벤트 처리란?

이벤트 처리는 사용자의 행동(클릭, 키 입력, 마우스 움직임 등)에 반응하여 JavaScript 코드를 실행하는 것입니다. JavaScript에서 이벤트를 처리하는 주요 방법은 onclick과 addEventListener입니다.

🔍 기본 HTML 예제

<button id="myButton">클릭하세요</button>
<div id="output">결과가 여기에 표시됩니다</div>

---

onclick 속성 사용법

onclick은 가장 간단한 이벤트 처리 방법입니다. HTML 속성 또는 JavaScript 속성으로 사용할 수 있습니다.

HTML에서 onclick 사용

<!-- HTML 속성으로 직접 사용 -->
<button onclick="handleClick()">HTML onclick</button>
<button onclick="alert('안녕하세요!')">간단한 알림</button>
<button onclick="changeColor()">색상 변경</button>

<script>
function handleClick() {
    document.getElementById('output').textContent = 'HTML onclick 실행됨!';
}

function changeColor() {
    document.body.style.backgroundColor = 'lightblue';
}
</script>

JavaScript에서 onclick 사용

// JavaScript 속성으로 설정
let button = document.getElementById('myButton');

button.onclick = function() {
    document.getElementById('output').textContent = 'JavaScript onclick 실행됨!';
};

// 화살표 함수 사용
button.onclick = () => {
    console.log('버튼이 클릭되었습니다!');
};

// 함수 참조로 설정
function myClickHandler() {
    alert('onclick 이벤트 발생!');
}

button.onclick = myClickHandler;

onclick의 특징

let button = document.getElementById('myButton');

// 첫 번째 핸들러
button.onclick = function() {
    console.log('첫 번째 핸들러');
};

// 두 번째 핸들러 (첫 번째를 덮어씀)
button.onclick = function() {
    console.log('두 번째 핸들러');
};

// 결과: "두 번째 핸들러"만 실행됨

실행 결과:

두 번째 핸들러

---

addEventListener 메서드

addEventListener는 더 강력하고 유연한 이벤트 처리 방법입니다.

기본 문법

// 문법
element.addEventListener('이벤트타입', 핸들러함수, 옵션);

// 기본 사용
let button = document.getElementById('myButton');

button.addEventListener('click', function() {
    console.log('addEventListener로 처리됨!');
});

// 화살표 함수 사용
button.addEventListener('click', () => {
    document.getElementById('output').textContent = 'addEventListener 실행!';
});

여러 이벤트 핸들러 추가

let button = document.getElementById('myButton');

// 첫 번째 핸들러
button.addEventListener('click', function() {
    console.log('첫 번째 핸들러 실행');
});

// 두 번째 핸들러 (추가됨)
button.addEventListener('click', function() {
    console.log('두 번째 핸들러 실행');
});

// 세 번째 핸들러
button.addEventListener('click', () => {
    document.getElementById('output').textContent = '세 번째 핸들러!';
});

// 결과: 모든 핸들러가 순서대로 실행됨

실행 결과:

첫 번째 핸들러 실행
두 번째 핸들러 실행
(output div에 "세 번째 핸들러!" 표시)

다양한 이벤트 타입

let input = document.getElementById('myInput');
let button = document.getElementById('myButton');

// 클릭 이벤트
button.addEventListener('click', () => {
    console.log('버튼 클릭됨');
});

// 마우스 오버/아웃
button.addEventListener('mouseover', () => {
    button.style.backgroundColor = 'lightblue';
});

button.addEventListener('mouseout', () => {
    button.style.backgroundColor = '';
});

// 키보드 이벤트
input.addEventListener('keyup', (event) => {
    console.log('입력된 키:', event.key);
    console.log('입력 내용:', event.target.value);
});

// 폼 이벤트
let form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
    event.preventDefault(); // 기본 제출 동작 방지
    console.log('폼 제출됨');
});

이벤트 제거하기

// 이벤트 핸들러 함수
function clickHandler() {
    console.log('클릭 핸들러');
}

let button = document.getElementById('myButton');

// 이벤트 추가
button.addEventListener('click', clickHandler);

// 이벤트 제거
button.removeEventListener('click', clickHandler);

// 익명 함수는 제거할 수 없음
button.addEventListener('click', function() {
    console.log('제거 불가능한 핸들러');
});

---

onclick vs addEventListener 비교

📊 차이점 비교표

특징	onclick	addEventListener
사용법	간단함	약간 복잡함
다중 핸들러	❌ 불가능 (덮어씀)	✅ 가능
이벤트 제거	onclick = null	removeEventListener
이벤트 옵션	❌ 제한적	✅ 다양한 옵션
브라우저 지원	✅ 모든 브라우저	✅ IE9+

🎯 언제 어떤 것을 사용할까?

onclick 사용 시기

// ✅ 간단한 일회성 이벤트
let simpleButton = document.getElementById('simple');
simpleButton.onclick = () => alert('간단한 알림');

// ✅ 프로토타이핑이나 테스트
let testButton = document.getElementById('test');
testButton.onclick = function() {
    console.log('테스트 클릭');
};

addEventListener 사용 시기

// ✅ 복잡한 애플리케이션
let complexButton = document.getElementById('complex');

// 여러 기능을 하나의 버튼에 추가
complexButton.addEventListener('click', trackClick);      // 분석
complexButton.addEventListener('click', updateUI);        // UI 업데이트
complexButton.addEventListener('click', saveData);        // 데이터 저장

// ✅ 이벤트 옵션이 필요한 경우
button.addEventListener('click', handler, { once: true }); // 한 번만 실행

---

실무 활용 패턴

1. 폼 검증과 제출

<form id="signupForm">
    <input type="email" id="email" placeholder="이메일">
    <input type="password" id="password" placeholder="비밀번호">
    <button type="submit">가입하기</button>
    <div id="errorMessage"></div>
</form>

let form = document.getElementById('signupForm');
let emailInput = document.getElementById('email');
let passwordInput = document.getElementById('password');
let errorDiv = document.getElementById('errorMessage');

// 실시간 검증
emailInput.addEventListener('blur', validateEmail);
passwordInput.addEventListener('input', validatePassword);

// 폼 제출 처리
form.addEventListener('submit', handleSubmit);

function validateEmail() {
    let email = emailInput.value;
    if (!email.includes('@')) {
        showError('올바른 이메일을 입력하세요');
        return false;
    }
    clearError();
    return true;
}

function validatePassword() {
    let password = passwordInput.value;
    if (password.length < 6) {
        showError('비밀번호는 6자 이상이어야 합니다');
        return false;
    }
    clearError();
    return true;
}

function handleSubmit(event) {
    event.preventDefault();

    if (validateEmail() && validatePassword()) {
        console.log('가입 처리 중...');
        // 실제 가입 로직
    }
}

function showError(message) {
    errorDiv.textContent = message;
    errorDiv.style.color = 'red';
}

function clearError() {
    errorDiv.textContent = '';
}

2. 이벤트 위임 패턴

<div id="todoList">
    <div class="todo-item">
        <span>할 일 1</span>
        <button class="delete-btn">삭제</button>
    </div>
    <div class="todo-item">
        <span>할 일 2</span>
        <button class="delete-btn">삭제</button>
    </div>
</div>
<button id="addTodo">할 일 추가</button>

let todoList = document.getElementById('todoList');
let addButton = document.getElementById('addTodo');

// 이벤트 위임: 부모 요소에서 이벤트 처리
todoList.addEventListener('click', function(event) {
    if (event.target.classList.contains('delete-btn')) {
        // 삭제 버튼 클릭
        let todoItem = event.target.parentElement;
        todoItem.remove();
        console.log('할 일 삭제됨');
    }
});

// 새 할 일 추가
addButton.addEventListener('click', function() {
    let newTodo = document.createElement('div');
    newTodo.className = 'todo-item';
    newTodo.innerHTML = `
        <span>새 할 일</span>
        <button class="delete-btn">삭제</button>
    `;
    todoList.appendChild(newTodo);
});

3. 키보드 단축키

// 전역 키보드 이벤트
document.addEventListener('keydown', function(event) {
    // Ctrl+S: 저장
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        saveDocument();
    }

    // ESC: 모달 닫기
    if (event.key === 'Escape') {
        closeModal();
    }

    // Enter: 검색
    if (event.key === 'Enter' && event.target.id === 'searchInput') {
        performSearch();
    }
});

function saveDocument() {
    console.log('문서 저장됨');
}

function closeModal() {
    let modal = document.querySelector('.modal');
    if (modal) {
        modal.style.display = 'none';
    }
}

function performSearch() {
    let searchTerm = document.getElementById('searchInput').value;
    console.log('검색어:', searchTerm);
}

4. 모바일 터치 이벤트

let touchElement = document.getElementById('touchArea');

// 터치 이벤트 (모바일)
touchElement.addEventListener('touchstart', function(event) {
    console.log('터치 시작');
});

touchElement.addEventListener('touchmove', function(event) {
    event.preventDefault(); // 스크롤 방지
    console.log('터치 이동');
});

touchElement.addEventListener('touchend', function(event) {
    console.log('터치 종료');
});

// 마우스와 터치 모두 지원
function handleInteraction(event) {
    console.log('상호작용 발생');
}

touchElement.addEventListener('click', handleInteraction);      // 마우스
touchElement.addEventListener('touchend', handleInteraction);   // 터치

---

마무리

이벤트 처리는 사용자와 상호작용하는 웹 애플리케이션의 핵심입니다. onclick과 addEventListener 각각의 특성을 이해하고 적절히 활용하면 효과적인 사용자 인터페이스를 만들 수 있습니다.

이벤트 처리 방법이 명확해졌나요? 실무에서 자주 사용하는 이벤트 패턴에 대한 궁금한 점이 있다면 댓글로 남겨주세요! 💬