unload(), 페이지에서 벗어날 때

unload

원문 링크 http://api.jquery.com/unload/

.unload(handler(eventObject))Returns : jQuery

개요 : "unload" JavaScript 이벤트를 바인딩합니다.

• .unload( handler(eventObject) )
• handler(eventObject) 이벤트가 발생하면 동시에 실행될 기능.
• .unload( [eventData], handler(eventObject) )
• eventData 이벤트 핸들러에 넘길 데이터 맵
• handler(eventObject) 이벤트가 발생하면 동시에 실행될 기능.

이 함수는 .bind('unload', handler)을 줄여놓은 것입니다.

unload 이벤트는 유저가 페이지를 벗어날 때 window 요소에서 발생합니다. 이것은 많은 상황을 의미하는데, 유저가 링크를 클릭해서 다른 쪽으로 이동했거나 새로운 URL을 치고 다른곳으로 빠져나갔다거나 하는 것을 의미하게 됩니다. 앞으로 뒤로 버튼도 발생합니다. 브라우져를 종료시켜도 발생합니다. 심지어 페이지 새로고침을 하면 unload 이벤트가 제일 처음 발생합니다.

unload 이벤트는 브라우져 버젼별 특성을 타기 때문에 다루는 데에 한계가 있습니다. 예를 들어, some versions of Firefox의 어떤 버전에서는 링크를 따라가면 발생하지만 윈도우를 닫으면 발생하지 않기도 합니다.

어떤 unload 이벤트라도 window 객체와 바인딩해야 합니다.

$(window).unload(function() {
  alert('Handler for .unload() called.');
});

위 스크립트로 인해, 현재 페이지에서 벗어날 때 알림창이 나타나게 됩니다. 이 unload 이벤트는 .preventDefault() 로 취소시킬수가 없습니다.

예 제  
페이지를 벗어날 때 알림창을 나타나게 합니다.

$(window).unload( function () { alert("Bye now!"); } );

 

페이지 종료 시 무언가 할때 사용하면 좋은 함수네요. 그런데 생각보다 적용이 쉽지 않았는데 요즘은 그나마 좀 나아졌죠. 은행 사이트들이 페이지 종료 시 로그아웃 된다고 알림창 뿌릴 때 가끔 쓰는 것 같더군요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.