JavaScript/eventhandling.html at main · EagerProgrammer/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<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>
    <script>
        //window의 Load이벤트는
        //파일을 전부 읽어서 태그들을 전부 메모리에 적재한 후에 발생
        window.addEventListener("load",(e)=>{
            document.getElementById("display").innerHTML = "이벤트 처리"
            for(let i=0; i < 100; i++){
            document.getElementById("body").innerHTML += "<h1>무한스크롤</h1>"}


            window.addEventListener("scroll", (e)=>{
                //스크롤하는 위치와 문서의 높이가 같을 때
                //가장 아래에서 스크롤을 할 때

                //스크롤 하는 가장 높은 위치를 가져오기
                var supportPageOffset = window.pageXOffset !== undefined;
                var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat")
                var scrollTop = supportPageOffset ? window.pageYOffset :
                isCSS1Compat ? document.documentElement.scrollTop :
                document.body.scrollTop;


                //스크롤하는 높이
                var scrollHeight = scrollTop + window.innerHeight
                //문서의 높이
                var documentHeight = document.body.clientHeight;
                //스크롤 하는 위치가 문서의 높이보다 크거나 같으면 계속 정보 생성
                if(scrollHeight >= documentHeight){
                    for(let i=0; i<30; i++){
                        document.getElementById("body").innerHTML += "<h1>무한스크롤</h1>"
                    }
                }

            })
        })

    </script>
</head>
<body>
    <div id="display"></div>
    <div id="body"></div>
</body>
</html>