방명록
- [개발자의품격][부트캠프][1기][13차시] JavaScript 주요 포인트 #20 | DOM event - 스크롤 이벤트2022년 02월 23일 00시 50분 23초에 업로드 된 글입니다.작성자: DandyNow728x90반응형
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>
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>
728x90반응형'영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글
다음글이 없습니다.이전글이 없습니다.댓글