반응형
아래 소스 코드는 beforeunload 이벤트를 통해서 사용자가 페이지를 벗어날 때 경고 메시지가 표시되며, 이벤트 제거하기 버튼을 클릭하면 beforeunload 이벤트를 제거하고 메시지를 표시하지 않는 코드입니다.
beforeunload 이벤트는 페이지를 벗어나기 전에 발생하는 이벤트로, 벗어나기 전에 추가 동작을 수행하거나 경고를 표시할 수 있습니다. beforeunload 이벤트를 사용하려면 일반적으로 이벤트 핸들러를 등록하고, 해당 이벤트 핸들러 내에서 사용자에게 보여줄 메시지를 반환해야 합니다. 이 메시지는 브라우저에 표시되며, 사용자에게 어떤 작업을 할 것인지를 확인하는 기회를 제공합니다. 사용자가 페이지를 떠나려고 할 때, 이 메시지가 표시되면 사용자는 "확인" 또는 "취소"와 같은 선택을 할 수 있으며, 선택에 따라 다른 작업을 수행할 수 있습니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<p>beforeunload 예제!</p>
<button id="leaveButton">이벤트 제거하기</button>
<script>
$(document).ready(function() {
// beforeunload 이벤트 핸들러 추가
$(window).on('beforeunload', function() {
return '변경 사항을 저장하지 않을 수 있습니다. 정말로 이 페이지를 떠나시겠습니까?';
});
});
// 이벤트 제거
$('#leaveButton').click(function() {
$(window).off('beforeunload'); // 이벤트 핸들러 제거
});
</script>
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] radio, checkbox 체크 값 가져오기, 확인하기, 선택하기 (0) | 2023.10.11 |
|---|---|
| [jQuery] remove(), empty() 메서드 사용방법, 예제 (요소 제거와 내용 비우기) (0) | 2023.09.25 |
| [jQuery] load() 메서드 사용법, 예제, 데이터 전달 (페이지 로드) (0) | 2023.09.18 |
| [jQuery] jqGrid header colNames 색상 변경하기 (header 테이블 스타일 수정) (0) | 2023.08.31 |
| [jQuery] 영문, 숫자, 한글, 특수문자 정규식 입력 체크 (영문 숫자만, 한글만, 영문 숫자 특수문자 조합) (1) | 2023.08.21 |
댓글