[Event] JQ - resize() 메서드 - 창크기변경이벤트 (= 윈도우창 리사이즈이벤트 = resize메서드 = 리사이즈 메서드)

목차

1. resize() 예제 - 창 크기 변동 자동 감지
2. resize() 예제 - 창 크기 변동 자동 감지 + 수동 촉발
3. resize() 정의
4. resize() 구문
5. resize() 예제 - fullpage.js 반응형 적용 (화면크기 따라 끄기/실행)

resize() 예제 - 창 크기 변동 자동 감지

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

var x = 0;

$(document).ready(function(){

  $(window).resize(function(){ // 창 크기 변경 자동 감지

    $("span").text(x += 1);

  });

});

</script>

<p>창크기 <span>0</span> 번 변경</p>

 

결과보기

resize() 예제 - 창 크기 변동 자동 감지 + 수동 촉발

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

var x = 0;

$(document).ready(function(){

  $(window).resize(function(){ // 창 크기 변동 자동 감지

    $("span").text( x+= 1);

  });

  $("button").click(function(){ // 창 크기 변동 수동 촉발

    $(window).resize();

  });

});

</script>

 

<p>창크기 <span>0</span> 번 변경</p>

 

<button>클릭</button>

 

결과보기

resize() 정의

 

resize 이벤트는 브라우저 창 크기 변경될 때 이벤트 발생.
※ resize() 메서드는 아래 2가지 역할 가능.

① resize 이벤트 촉발.

② resize 이벤트 발생 시 실행할 함수 부착.

 

resize() 구문

 

resize 이벤트 촉발

$(selector).resize()

  

resize 이벤트에 함수 부착.

$(selector).resize(function)

 

---

[매개변수]

 

function

선택. resize 이벤트 발생 때 실행할 함수 지정.

 

resize() 예제 - fullpage.js 반응형 적용 (화면크기 따라 끄기/실행)

 

<script>

...

fullpageActivate();

 

// 너비 변경 돼야 아래 코드 작동

$(window).resize(function() {

    if($(this).width() <= 768) {

        fullpage_api.destroy('all');

    } else {

        fullpageActivate();

    }

});

 

// 태블릿으로 바로 접속한 사람 경우 아래 코드 필요.

$(window).trigger('resize');

</script>

 

 

PS. 관련 좌표

• https://youtu.be/n4SaGwSFj4E
• https://alvarotrigo.com/fullPage/ko/