Dandy Now!
  • [개발자의품격][부트캠프][1기][13차시] JavaScript 주요 포인트 #20 | DOM event - 스크롤 이벤트
    2022년 02월 23일 00시 50분 23초에 업로드 된 글입니다.
    작성자: DandyNow
    728x90
    반응형

     JavaScript 주요 포인트 #20

    DOM event

    event 1

    <!-- dom_event.html -->
    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <!-- <body onload="myFunction();">는 페인팅이 모두 완료되면 myFunction() 함수를 실행한다. -->
      <body>
        <!-- 실무에서는 버튼에 이벤트를 바로 적용하기 보다는 setEvent를 만들어 사용한다. -->
        <!-- 버튼에 이벤트가 있으면 가독성은 좋지만 디자인이 변경되면 다시 작업해야하는 문제가 생긴다. -->
        <!-- 디자인 변경될시를 고려하여 스크립트 코드를 분리하기 위함이다. -->
        <!-- <button onclick="doSearch();">조회</button> -->
        <button id="btn1">조회1</button>
        <button id="btn2">조회2</button>
        <script>
          function doSearch() {
            console.log("doSearch 호출");
          }
    
          // 순수 Javascript로 작성할때는 항상 setEvent 함수를 선언해 사용한다.
          function setEvent() {
            document.querySelector("#btn1").addEventListener("click", doSearch);
            document.querySelector("#btn2").addEventListener("click", doSearch);
          }
    
          //onload
          window.addEventListener("load", () => {
            setEvent();
          });
        </script>
      </body>
    </html>

     


    event 2

    스크롤 이벤트를 다룬다.

    <!-- dom_event2 -->
    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          /* 스크롤을 스무스하게 */
          html {
            scroll-behavior: smooth;
          }
        </style>
      </head>
      <body onscroll="checkScroll();">
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <!-- 동그라미 버튼 -->
        <button
          style="
            position: fixed;
            bottom: 10px;
            right: 50px;
            width: 70px;
            height: 70px;
            border-radius: 35px;
            display: none;
          "
          id="btnScroll"
        ></button>
        <script>
          let showScrollBtn = false;
          function checkScroll(e) {
            // console.log(window.scrollY); // scrollY는 스크롤 값을 알려준다.
    
            // 이 코드는 성능상 좋은 코드가 아니다. 컴퓨터 성능이 떨어지는 경우 버벅임 현상 생긴다.
            // scrollY 값이 1000 이상일때 버튼을 보여 준다.
            // if (window.scrollY > 1000) {
            //   document.querySelector("#btnScroll").style.display = "block";
            // } else {
            //   document.querySelector("#btnScroll").style.display = "none";
            // }
    
            if (window.scrollY > 1000 && !showScrollBtn) {
              console.log(window.scrollY);
              showScrollBtn = true;
              document.querySelector("#btnScroll").style.display = "block";
            } else if (window.scrollY <= 1000 && showScrollBtn) {
              console.log(window.scrollY);
              showScrollBtn = false;
              document.querySelector("#btnScroll").style.display = "none";
            }
          }
    
          window.addEventListener("load", () => {
            document.querySelector("#btnScroll").addEventListener("click", () => {
              console.log(event);
              document.documentElement.scrollTop = 0; // 스크롤이 가장 위로 올라간다.
            });
          });
        </script>
      </body>
    </html>​

     

    [그림 1] 동그란 버튼 클릭시 스크롤이 가장 위로 올라간다.

     


     

    event 3

    Lasy Loading에 쓰이는 방법이다.

    <!-- dom_event3.html -->
    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div
          style="height: 200px; overflow-y: auto; border: 2px solid black"
          id="divContainer"
          onscroll="checkScroll();"
        >
          <p>Item</p>
          <p>Item</p>
          <p>Item</p>
          <p>Item</p>
          <p>Item</p>
          <p>Item</p>
          <p>Item</p>
          <p>Item</p>
          <p>Item</p>
          <p>Item</p>
        </div>
        <script>
          function checkScroll() {
            console.log(event.target.scrollHeight);
            console.log(event.target.clientHeight + event.target.scrollTop); // clientHeight는 height와 같은 200이다.
    
            if (
              event.target.clientHeight + event.target.scrollTop >=
              event.target.scrollHeight - 5 // 오차범위를 -5 정도 주었다.
            ) {
              document
                .querySelector("#divContainer")
                .insertAdjacentHTML("beforeend", "<p>추가된 아이템</p>");
            }
          }
        </script>
      </body>
    </html>

     

    [그림 2] 스크롤을 내리면 "추가된 아이템"이 계속 올라온다.

     

    728x90
    반응형
    댓글