• Q&A
  • 회원가입
  • 로그인

[DOM_Event] JS - orientationchange 이벤트 - 장치 방향 바뀜 이벤트 (= 오리엔테이션체인지 이벤트) ※ 모바일 스마트폰 기기 방향 변동/변환 이벤트

목차

  1. orientationchange 예제 - 장치 방향 바뀜 이벤트
  2. orientationchange 정의
  3. orientationchange 구문
  4. orientationchange 예제 - 장치 방향에 따라 (글자내용/배경색) 변경

 

※ 이벤트 효과 확인하려면, 화면 자동 회전 지원되는 스마트폰으로 확인.

 

orientationchange 예제 - 장치 방향 바뀜 이벤트

 

<script>

screen.addEventListener("orientationchange", function() {

    alert("현재 기기 방향: " + screen.orientation);

});

</script>

 

orientationchange 정의

 

장치 방향 바뀜 이벤트.

 

  • 세로 모드 (= portrait 모드)
  • 가로 모드 (= landscape 모드)

 


 

1.

  • interface 이벤트 일종
  • 이벤트확산: X
  • 취소가능성: X
  • 이벤트타겟: Screen
  • 기본행위: None

 

2. 예제 더 보기

https://www.w3.org/TR/screen-orientation/#event-handlers

 


[이벤트 내장 속성]

 

target

  • 읽기 전용.
  • EventTarget타입. 
  • 이벤트 대상(DOM 트리의 최상위 대상)


type

  • 읽기 전용.
  • DOMString타입.
  • 이벤트 유형


bubbles

  • 읽기 전용
  • Boolean타입
  • 이벤트가 보통 확산하는지 여부


cancelable

  • 읽기 전용.
  • Boolean타입
  • 이벤트가 취소 가능한지 여부



orientationchange 구문

 

JS 속성 방식

screen.onorientationchange = homzzang();

 

JS 메서드 방식

screen.addEventListener("orientationchange", homzzang);


 

orientationchange 예제 - 장치 방향에 따라 (글자내용/배경색) 변경

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>

$(document).on("pagecreate",function(event){

  $(window).on("orientationchange",function(){

    if(window.orientation == 0) {

      $("p").text("장치 방향이 세로모드(= portrait)로 바뀜.").css({"background-color":"yellow","font-size":"300%"});

    } else {

      $("p").text("장치 방향이 가로모드(= landscape)로 바뀜.").css({"background-color":"pink","font-size":"200%"});

    }

  });                   

});

</script>

</head>

<body>


<div data-role="page">

  <div data-role="header">

    <h1>홈짱닷컴 Homzzang.com</h1>

  </div>


  <div data-role="main" class="ui-content">

    <p>홈페이지 제작관리 강의</p>

  </div>


  <div data-role="footer">

    <h1>Since 2012</h1>

  </div>

</div> 

    

</body>

</html>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012