js

JS - 윈도우 이벤트

3월 22, 2019
브라우저에 변화가 발생하면 자동으로 실행될 이벤트를 설정할 수 있습니다.

이벤트 설 명
onload 페이지가 모두 로드되었을 때
onpageshow 페이지가 로드되기 시작할 때
onunload 페이지를 빠져 나갈 때
onresize 브라우저 창 크기를 조정할 때
onafterprint 문서를 인쇄 된 후에 실행할 이벤트
onbeforeprint 문서를 인쇄하기 전에 실행할 이벤트
onbeforeunload 현재 페이지에서 새로고침하거나 벗어나려고 할 때
(사이트에서 나가시겠습니까? 와 같은 대화상자가 뜸)
onabort 이미지를 읽어 들이는 중 사용자가 중지시켰을 때
onerror 문서나 이미지를 로드하는 중에 오류가 발생하면
onhashchange URL의 앵커가 변경되었을 때
onoffline 브라우저가 오프라인으로 작동하기 시작할 떼
ononline 브라우저가 온라인으로 작동하기 시작할 때
onpopstate 브라우저 히스토리가 바뀔 때
(이전 페이지나 다른 페이지로 이동할 때 등)
onstorage 웹 저장소 영역이 업데이트될 때
  • url: 이벤트를 유발한 페이지 URL
  • oldValue: 이전 값
  • newValue: 새로운 값
  • key: 키 문자열.
  • storageArea: 이벤트가 발생한 웹 저장소 객체


onload 이벤트

onload 이벤트는 브라우저가 문서를 모두 읽어 들였을 때 이벤트가 발생합니다.

<script>
window.onload = function(){
  alert("브라우저가 페이지를 로드하였습니다.");
}
</script>


onresize 이벤트

onresize 이벤트는 브라우저 창 크기가 바뀔 때 이벤트가 발생합니다.

<script>
addEventListener("resize", event);

function event(){
  alert("창 크기가 바뀌었습니다.");
}
</script>


onbeforeunload 이벤트

onbeforeunload 는 새로고침하거나 현재 페이지를 벗어나려고 할 때 이벤트가 발생합니다.

<html>
 <body onbeforeunload="return a();">

  <a href="http://habonyphp.com">홈으로 이동</a>

  <script>
  function a(){
    return "false";
  }
  </script>
 </body>
</html>

<a href="http://habonyphp.com">홈으로 이동</a>

<script>
addEventListener('beforeunload', onbeforeunload);
function onbeforeunload(e) {
    e.returnValue = "false";
};
</script>


onerror 이벤트

onerror 이벤트는 로드하려는 문서나 파일에서 오류가 발생할 때 이벤트를 처리합니다. 예제는 해당 이미지를 읽어 들이지 못할 때 "no_img.png"로 대체합니다.

<img src="habony.jpg" id="img">

<script>
var img = document.getElementById("img");
img.addEventListener("error", event);

function event(){
  img.src = "no_img.png";
}
</script>

다음은 오디오나 비디오 재생에 실페할 때 처리하는 방법을 설명합니다.

<h3>Organ</h3>
<audio src="sound/organ.mp3" controls onerror="fail(event)">
      <p>이 브라우저는 오디오를 재생할 수 없습니다.</p>
</audio>

<script>
function fail(e){
  if(e.target.error.code == e.target.error.MEDIA_ERR_ABORTED){
    alert("사용자가 재생을 중지했습니다.");
  }else if(e.target.error.code == e.target.error.MEDIA_ERR_NETWORK){
    alert("네트워크 에러");
  }else if(e.target.error.code == e.target.error.MEDIA_ERR_DECODE){
    alert("디코드 문제");
  }else if(e.target.error.code == e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED){
    alert("지원되지 않는 파일 형식이거나 파일을 찾을 수 없습니다.");
  }else{
    alert("알 수 없는 오류가 발생했습니다.");
  }
}
</script>

Tag:

0 Comments

0 댓글