BOM을 이용한 브라우저 이벤트 처리

13 Oct 2023

브라우저 객체 모델(BOM, Browser Object Model)은 웹 브라우저를 프로그래밍적으로 제어할 수 있는 JavaScript 인터페이스를 제공합니다. BOM은 웹 페이지와 상호 작용하는 데 사용되며, 이벤트 처리에도 사용될 수 있습니다. 이번 포스트에서는 BOM을 이용하여 브라우저 이벤트를 처리하는 방법에 대해 알아보겠습니다.

1. 이벤트 핸들러 등록

이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수입니다. BOM을 사용하여 이벤트 핸들러를 등록하는 방법은 간단합니다. 다음은 window 객체의 로드 이벤트가 발생했을 때 실행되는 이벤트 핸들러를 등록하는 예제입니다.

window.onload = function() {
  console.log('페이지가 로드되었습니다.');
}

위 예제에서는 window.onload 속성에 익명 함수를 할당함으로써 페이지 로드 시 실행될 코드를 작성하고 있습니다.

2. DOM 요소 이벤트 처리

BOM을 사용하여 DOM 요소의 이벤트도 처리할 수 있습니다. document 객체의 getElementById() 메서드를 사용하여 DOM 요소를 선택한 후, 해당 요소의 이벤트 핸들러를 등록할 수 있습니다. 다음은 버튼 클릭 이벤트를 처리하는 예제입니다.

var button = document.getElementById('myButton');
button.onclick = function() {
  console.log('버튼이 클릭되었습니다.');
}

위 예제에서는 getElementById() 메서드로 myButton id를 가진 요소를 선택한 후, onclick 속성에 익명 함수를 할당함으로써 버튼 클릭 시 실행될 코드를 작성하고 있습니다.

3. 이벤트 리스너 등록

이벤트 리스너는 addEventListener() 메서드를 사용하여 등록할 수 있습니다. 이 방법은 하나의 이벤트에 여러 개의 핸들러를 등록할 수 있고, 등록된 핸들러를 제거할 수도 있어 유연한 이벤트 처리가 가능합니다. 다음은 마우스 클릭 이벤트를 처리하는 예제입니다.

var element = document.getElementById('myElement');
element.addEventListener('click', function() {
  console.log('요소가 클릭되었습니다.');
});

위 예제에서는 addEventListener() 메서드를 사용하여 click 이벤트와 해당 이벤트가 발생했을 때 실행될 콜백 함수를 등록하고 있습니다.

마무리

BOM은 브라우저와 상호 작용하는 JavaScript 인터페이스로, 이벤트 처리에도 사용될 수 있습니다. 이번 포스트에서는 이벤트 핸들러 등록과 DOM 요소의 이벤트 처리, 그리고 이벤트 리스너 등록에 대해 간단히 알아보았습니다. BOM을 통해 브라우저 이벤트를 처리하는 방법에 대해 더 깊이 공부하고 웹 애플리케이션의 상호 작용성을 높일 수 있습니다.

참고 자료:

#JavaScript #BOM #이벤트처리