웹 애플리케이션에서 사용자가 페이지를 인쇄할 때 추가 동작을 수행하려면 자바스크립트를 사용하여 프린트 이벤트를 감지해야 합니다. 이를 위해 window 객체의 beforeprint 이벤트를 사용할 수 있습니다.

beforeprint 이벤트 등록

다음은 beforeprint 이벤트를 감지하여 추가 동작을 수행하는 예제 코드입니다.

window.addEventListener('beforeprint', function(event) {
  // 프린트 이벤트 발생 시 수행할 작업
  // 예: 모달 표시, 특정 요소 숨김 등
  console.log('페이지가 프린트됩니다.');
});

위 코드에서 window 객체에 beforeprint 이벤트를 등록하고, 프린트 이벤트가 발생했을 때 수행할 동작을 정의합니다.

추가 동작 정의

프린트 이벤트가 발생했을 때 수행할 동작은 해당 상황에 맞게 정의할 수 있습니다. 예를 들어, 모달을 표시하거나 특정 요소를 숨길 수 있습니다.

window.addEventListener('beforeprint', function(event) {
  // 모달 표시
  document.getElementById('print-modal').style.display = 'block';
  
  // 특정 요소 숨김
  document.getElementById('print-button').style.visibility = 'hidden';
});

위 코드에서는 프린트 이벤트가 발생하면 print-modal이란 ID를 가진 모달을 표시하고, print-button이란 ID를 가진 버튼을 숨깁니다.

결론

프린트 이벤트를 감지하여 자바스크립트로 추가 동작을 수행하는 방법에 대해 알아보았습니다. 이를 활용하면 웹 애플리케이션에서 프린트 이벤트에 대응하여 사용자 경험을 개선할 수 있습니다.

참고 자료

• MDN Web Docs: beforeprint event