브라우저 이벤트: 웹 상호작용의 핵심

자주 사용되는 DOM 이벤트

이벤트는 사용자의 행동이나 브라우저 상태 변화에 따라 발생하며, 이를 기반으로 웹 애플리케이션의 동작을 제어할 수 있습니다. 아래는 웹 개발에서 자주 활용되는 주요 DOM 이벤트들입니다.

마우스 이벤트

• click: 요소에서 마우스 왼쪽 버튼을 클릭(터치스크린에서는 탭)했을 때 발생.
• contextmenu: 마우스 오른쪽 버튼을 클릭했을 때 발생.
• mouseover / mouseout: 마우스 커서가 요소 위로 들어오거나 나갈 때 발생.
• mousedown / mouseup: 마우스 버튼을 누르거나 뗄 때 발생.
• mousemove: 마우스가 움직일 때 발생.

폼 이벤트

• submit: 사용자가 <form> 태그를 제출할 때 발생.
• focus: <input> 같은 요소에 포커스가 맞춰질 때 발생.

키보드 이벤트

• keydown / keyup: 키를 누르거나 뗄 때 발생.

문서 이벤트

• DOMContentLoaded: HTML이 모두 로드되고 DOM이 완성되었을 때 발생.

CSS 이벤트

transitionend: CSS 트랜지션이 완료되었을 때 발생.

이벤트 핸들러

HTML 속성으로 이벤트 핸들러 할당

가장 간단한 방법은 HTML 태그에 on<event> 속성을 직접 사용하는 것입니다.

<button onclick="alert('안녕하세요!')">클릭하세요</button>

• 장점: 직관적이고 간단함.
• 단점: 코드가 길어지면 가독성이 떨어지고, HTML과 JavaScript가 섞여 유지보수가 어려움. 속성값은 문자열로 처리되므로 따옴표 사용에 주의해야 함.

긴 코드를 피하려면 별도의 함수를 호출하는 방식이 좋습니다:

<script>
  function greet() {
    alert('안녕하세요!');
  }
</script>
<button onclick="greet()">클릭하세요</button>

DOM 프로퍼티로 핸들러 할당

<button id="myButton">클릭하세요</button>
<script>
  const button = document.getElementById('myButton');
  button.onclick = function() {
    alert('버튼이 클릭되었습니다!');
  };
</script>

• 장점: HTML과 JavaScript를 분리해 깔끔함.
• 단점: 하나의 이벤트에 하나의 핸들러만 지정 가능. 새 핸들러를 추가하면 기존 핸들러가 덮어씌워짐.

button.onclick = () => alert('첫 번째');
button.onclick = () => alert('두 번째'); // 첫 번째 핸들러가 사라짐

핸들러 제거

button.onclick = null;

addEventListener로 핸들러 관리

하나의 이벤트에 여러 핸들러를 추가할 수 있습니다.

element.addEventListener('click', function(event) {
  alert('첫 번째 반응');
});
element.addEventListener('click', function(event) {
  alert('두 번째 반응');
});

addEventListener 문법

element.addEventListener(event, handler, [options]);

• event: 이벤트 이름(예: "click")
• handler: 실행할 함수
• options: { once: true } (한 번 실행 후 제거), { capture: true } (캡처링 단계에서 실행) 등

핸들러 제거

  function sayHello() {
    alert('안녕!');
  }
  element.addEventListener('click', sayHello);
  element.removeEventListener('click', sayHello); // 동일한 함수 참조 필요

• 장점: 유연성, 다중 핸들러 지원, 특정 이벤트 처리 가능
• 주의점: 제거하려면 동일 함수 참조 사용

이벤트 객체

이벤트 발생 시 브라우저는 이벤트 객체를 생성해 핸들러에 전달합니다. 이 객체는 이벤트의 세부 정보를 담고 있어, 이를 통해 더 정교한 제어가 가능합니다.

document.querySelector('button').addEventListener('click', function(event) {
  console.log(`이벤트 타입: ${event.type}`);
  console.log(`발생 요소: ${event.currentTarget}`);
  console.log(`클릭 위치: (${event.clientX}, ${event.clientY})`);
});

객체 형태의 핸들러

addEventListener는 함수뿐 아니라 객체를 핸들러로 사용할 수 있습니다. 이 경우 객체의 handleEvent 메서드가 호출됩니다.

const button = document.querySelector('button');
const handlerObj = {
  handleEvent(event) {
    alert(`${event.type} 이벤트 발생!`);
  }
};
button.addEventListener('click', handlerObj);

클래스 형태도 사용

class EventManager {
  handleEvent(event) {
    if (event.type === 'click') {
      alert('클릭!');
    }
  }
}
const manager = new EventManager();
button.addEventListener('click', manager);