2021.08.24

이벤트 버블링

하위요소의 이벤트가 상위요소로 전파되어 요소간 이벤트 발생이 겹처 이벤트 오류가 발생하는 현상

이벤트 버블링 예시

$(function () {
  // 1. 팝업구현 -> 배너를 클릭하면 팝업이 나타난다.
  $('.box').click(function () {
    $('#popup').fadeIn(500);
    $('#popup').click(function () {
      $(this).fadeOut(500);
    });
    $('.modal').click(function (e) {
      e.stopPropagation(); // 이벤트 버블링 현상 차단
    });
  });

팝업 창이 뜨면 그 팝업 창 밖의 창배경을 클릭할때와 닫기버튼을 클릭할때 이 두가지만 팝업 닫히게하게 코드를 작성했지만, e.stopPropagation();로 팝업창 자체에 이벤트 버블링을 막지 않았다면 팝업창의 아무곳이나 클릭해도 팝업이 닫히는 이벤트 버블링 즉, 이벤트가 상위 요소로 전파되는 버블링이 일어나게 된다.

막는 방법은 위와 같이 버블링을 막고 싶은 요소에 e.stopPropagation();작성해주면 된다.

화면 수치 조작 메서드

size

화면의 너비나 높이 같은 수치를 가져오는데 사용하는 메서드

내부요소크기

• $대상.width()

• $대상.height()

내부요소크기 + padding

• $대상.innerWidth()

• $대상.innerHeight()

내부요소크기 + padding + border

• $대상.outerWidth()

• $대상.outerHeight()

내부요소크기 + padding + border + margin

• $대상.outerWidth(true)

• $대상.outerHeight(true)

브라우저 전체에서 좌표

• $대상.offset().left;

• $대상.offset().top;

부모요소 기준으로 좌표

• $대상.position().left;

• $대상.position().top;

resize

화면의 크기가 변경되었을때의 이벤트를 받아 실행되는 메서드

• $(대상 및 window).resize();

mousemove

마우스가 선택요소 위에서 위치할때 발생하는 메서드

• $(대상 및 window).mousemove();

코드예시

    <script>
      $(function () {
        $('#subject')
          .mousemove(function (e) {
            let X = e.pageX; // 마우스 포인터의 브라우저 X 좌표값
            let Y = e.pageY; // 마우스 포인터의 브라우저 Y 좌표값
            console.log(X, Y);
            $('.tip')
              .css({
                left: X - 30,
                top: Y - 60,
              })
              .addClass('on');
          })
          .mouseleave(function () {
            $('.tip').removeClass('on');
          });
      });
    </script>

매개변수로 이벤트를 가져와 해당 좌표값을 .pageX, .pageY로 가져오면서 이를 이용해 조작변화를 주며 사용한다.

scroll

화면에 스크롤 좌표를 메서드로 가져와 스크롤 이벤트가 발생시 해당 값들을 비교하여 애니메이션을 넣어주며 주로 사용한다.

선택요소 및 브라우저 전체에서 스크롤된 좌표

• $(대상 및 window).scrollLeft();

• $(대상 및 window).scrollTop();

사용예시

    <script>
      $(function () {
        let top = $('#outer').scrollTop();
        let left = $('#outer').scrollLeft();
        console.log(top, left);
        $('#info span').text(`scrollTop: ${top} / scrollLeft:${left}`);
        $('#outer').scroll(function () {
          top = $('#outer').scrollTop();
          left = $('#outer').scrollLeft();
          $('#info span').text(`scrollTop: ${top} / scrollLeft:${left}`);
        });
        $('button').click(function () {
          $('#outer').scrollTop(200).scrollLeft(300);
        });
      });
    </script>

scroll 이벤트 메서드와 offset,scrollTop 위치 메서드 응용

    <script>
      $(window).scroll(function () {
        let scTop = $(this).scrollTop();
        let boxTop1 = $('.s1').offset().top;
        let boxTop2 = $('.s2').offset().top;
        let boxTop3 = $('.s3').offset().top;
        let boxTop4 = $('.s4').offset().top;
        let boxTop5 = $('.s5').offset().top;
        // if (scTop > boxTop2 - 400) {
        //   $('.s1').addClass('on');
        // } else {
        //   $('.s1').removeClass('on');
        // }

        // if (scTop > boxTop3 - 700) {
        //   $('.s2').addClass('on');
        // } else {
        //   $('.s2').removeClass('on');
        // }

        //위의 반복되는 코드를 줄이기 위해 하단과 같이 each 메서드를 사용
        $('section').each(function () {
          let offTop = $(this).offset().top;
          if (scTop > offTop - 300) {
            $(this).addClass('on');
          } else {
            $(this).removeClass('on');
          }
        });
      });
    </script>

반복코드 작성을 피하기 위해 section태그 자체를 선택요소로 두어 배열형태로 받아 each()메서드로 scroll 이벤트가 발생할 때(this) scrollTop값과 each()에 영향을 받는 각각 배열값인 this의 offset().top;값을 비교해 미리 세팅해둔 css 클래스를 추가했다 제거하면서 애니메이션을 준다.

배열 메서드

each

배열의 각 요소에 함수를 각각 동일하게 반복하여 실행시켜준다.

• $.each('배열명 또는 객체명', 함수(index, value))

사용예시

    <script>
      $(function () {
        let city = ['서울', '대구', '대전', '부산'];
        $.each(city, function (index, value) {
          console.log(`${index} : ${value}`);
        });

        let subject = {
          // 객체 key: value
          subject: 'html',
          grade: 1,
          days: 20,
        };
        $.each(subject, function (key, value) {
          console.log(key + ' : ' + value);
        });
      });
    </script>

each()의 각 인자값에 해당하는 배열과 객체의 index와 key 값에 맞게 value가 들어오는 것을 확인할 수 있다.

map

.each는 return이 실행되지 않는다. 때문에 기존 배열 및 객체에서 새로운 배열 및 객체를 만들기 위해서는 map을 사용해야 한다.

map은 each와 다르게 인자 순서가 반대로 value, index가 들어온다.

• $.map('배열 또는 객체명', function(value, index){});

사용예시

    <script>
      let city = ['서울', '부산', '광주', '경기도'];
      $.map(city, function (value, index) {
        console.log(value, index);
      });
      let newCity = $.map(city, function (value, index) {
        if (index < 2) {
          return value;
        }
      });
      console.log(newCity.toString());
      console.log(newCity);
    </script>

map() 인자에 맞게 value와 그에 해당하는 index 번호가 들어오는 것을 확인할 수 있다.

그리고 조건식을 사용해 value를 return해주어 조건에 맞는 새로운 배열을 기존 배열에서 생성할 수 있다.

grep

        $.grep(Array, function(배열객체, 인덱스번호){
          return[true, false]
        });

배열이나 객체배열에서 true인 값만 리턴해주어 새로운 배열을 만들어주는 메서드이다.

사용예시

    <script>
      let arr1 = [
        { name: '무대리', area: '서울' },
        { name: '홍과장', area: '부산' },
        { name: '박사장', area: '대전' },
        { name: '빅마마', area: '서울' },
      ];
      let arr3 = $.grep(arr1, function (object, index) {
        console.log(object, index);
        if (object.area == '서울') {
          return true; // true면 객체 데이터 반환
        } else {
          return false;
        }
      });
      console.log(arr3);
    </script>

조건이었던 object.area == '서울'이 참인 객체만 가져와 새로운 배열이 만들어진 것을 확인할 수 있다.

map과 마찬가지로 인자에 value, index로 value가 먼저들어오는 것을 확인할 수 있다.

inArray

• $ .inArray() : 지정한 데이터를 찾아서 인덱스값 반환
  $ .inArray(data, Array, start index);

• $ .isArray() : 지정한 데이터가 배열이면 true, 배열이 아니면 false 반환
  $ .inArray(object);

• $ .merge() : 두배열 객체를 하나의 배열 객체로 묶는다
  $ .inArray(Array1, Array2);

사용예시

    <script>
      let arr1 = ['서울', '대전', '부산', '전주'];
      let arr2 = ['한국', '미국', '일본', '중국'];

      let obj = {
        name: '정부장',
        area: '서울',
      }; // 키:값

      let idxNum = $.inArray('부산', arr1);
      console.log(idxNum); // 2 -> 배열의 인덱스 번호 반환

      let okArray1 = $.isArray(arr1);
      console.log(okArray1); // true -> 배열

      let okArray2 = $.isArray(obj);
      console.log(okArray2); // false -> 배열 아님

      $.merge(arr2, arr1); // 첫번째 배열에 다음 배열이 합쳐진다.
      console.log(arr2);
      console.log(arr1);
    </script>

inArray로 원하는 value에 해당하는 index 번호를 받았고,
isArray로 선택요소가 배열이면 true가 나오고 객체이면 false가 나온다.
merge로 배열2에 배열1을 합쳐 배열2의 배열이 증가한것을 볼 수 있다.