브라우저 Object Model (BOM)은 브라우저 창과 관련된 객체와 메서드를 제공하는 JavaScript API입니다. 이 중 이벤트 리스너는 특정 이벤트가 발생했을 때 원하는 동작을 수행할 수 있게 해줍니다.

BOM 이벤트 리스너 등록

BOM에서 이벤트 리스너를 등록하려면 addEventListener 메서드를 사용합니다. 아래는 window 객체에 load 이벤트 리스너를 등록하는 예제입니다.

window.addEventListener('load', function() {
  // 페이지 로드가 완료되었을 때 실행되는 코드
});

위 예제에서 load는 페이지가 완전히 로드되었을 때 발생하는 이벤트입니다. 이벤트 이름은 필요에 따라 다르게 지정할 수 있습니다.

주요 BOM 이벤트

다음은 자주 사용되는 주요 BOM 이벤트 몇 가지입니다.

• load: 페이지가 완전히 로드되었을 때 발생합니다.
• unload: 페이지가 닫히거나 이동할 때 발생합니다.
• resize: 브라우저 윈도우 크기가 변경되었을 때 발생합니다.
• scroll: 스크롤이 이동할 때 발생합니다.

이벤트 리스너 제거

등록한 이벤트 리스너를 제거하려면 removeEventListener 메서드를 사용합니다. 아래는 window 객체에서 등록한 load 이벤트 리스너를 제거하는 예제입니다.

function onPageLoad() {
  // 페이지 로드가 완료되었을 때 실행되는 코드
}

window.addEventListener('load', onPageLoad);

// 이후에 이벤트 리스너 제거
window.removeEventListener('load', onPageLoad);

이렇게 등록한 이벤트 리스너를 제거하면 해당 이벤트가 발생할 때 호출되는 함수가 실행되지 않게 됩니다.

결론

BOM 이벤트 리스너를 활용하면 웹 애플리케이션에서 페이지 로드, 윈도우 리사이즈 등과 같은 사용자 동작에 반응할 수 있습니다. 적절한 이벤트를 등록하고 필요한 동작을 추가하여 원하는 동작을 수행할 수 있습니다.

References:

• MDN Web Docs - Window: events
• JavaScript.info - Browser environment, specs
• W3Schools - Using the Browser Object Model
• JSConf - The Browser Object Model (BOM)

#BOM #이벤트리스너