컴퓨터는 잘못이 없다..

[JavaScript]addEventListener 퀴즈 본문

공부/JavaScript

[JavaScript]addEventListener 퀴즈

도토리까꿍v 2020. 11. 9. 09:29
Contents 접기

[QUIZ]

아래 20칸의 box를 클릭했을 때 clicked가 나오도록 구현하시오!

[hint]
1. for과 foreach 둘다 구현해보기!
2. document.querySelectorAll("div")[i].addEventListener(); 사용하기!
3. this.innerText 

 

 

[정답 코드]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_quiz.html</title>

    <style>
            .box{ /*class명이 box인 요소의 스타일을 변경해라*/
                width: 100px;
                height: 100px;
                background-color: rgb(245, 255, 217);
                border : 1px solid red; 
                float:left
            }

    </style>
</head>
<body>
    <h1>EventListener 퀴즈</h1>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        //클릭한 곳에 clicked!가 뜨도록 만드시오!
        /*
            [hint]
            1. for과 foreach 둘다 구현해보기!
            2. document.querySelectorAll("div")[i].addEventListener(); 사용하기!
            3. this.innerText 
        */

        //정답1
        // (function(){
        //     //for로 구현해보기
        //     let divs = document.querySelectorAll("div");
        //     for(let i=0; i<divs.length; i++){
        //         divs[i].addEventListener("click",function(){
        //             this.innerText = "clicked";
        //         });
        //     };
        // })();


        //정답2
        //for로 구현해보기
        // let divs = document.querySelectorAll("div");
        // for(let i=0; i<divs.length; i++){
        //     divs[i].addEventListener("click",function(){
        //         this.innerText = "clicked";
        //     });
        // };

        //정답3
        //for each로 구현해보기
        // let div_arr = document.querySelectorAll("div");
        // div_arr.forEach(function(item){
        //     item.addEventListener("click",function(){
        //         this.innerText = "clicked";
        //          //item.innerText = "clicked"; //윗줄과 같은 의미
        //     });
        // });


        //정답4
        (function(){
            let div_arr = document.querySelectorAll("div");
            div_arr.forEach(function(item){
                item.addEventListener("click",function(){
                    this.innerText = "clicked";
                    //item.inerText = "clicked"; //윗줄과 같은 의미!
                });
            });
        })();
        
        //정답4 다르게 써보기 
        // (function(){
        //     let div_arr = document.querySelectorAll("div");
        //     div_arr.forEach(function(item,index){
        //         div_arr[index].addEventListener("click",function(){
        //             item.innerText = "clicked";
        //         });
        //     });
        // })();
        
        
       
        
        
    </script>
    
</body>
</html>

 

[코드 해설]

정답1,4 와 정답2,3의 차이?

 

정답2,3은 외부에서 변수,함수에 접근 가능하다.

 

정답1,4는 즉시실행함수로 감싸주어 내부 변수,함수에 접근하지 못한다. 

실제로 f12를 통해 divs를 눌러봐도 보지 못함!

 

 

저작자표시

'공부 > JavaScript' 카테고리의 다른 글

[JavaScript]object type 참조하기  (0) 2020.11.09
[JavaScript]addEventListener의 keydown이벤트  (0) 2020.11.09
[JavaScript]addEventListener의 callback함수 매개변수, mousemove 이벤트  (0) 2020.11.09
'공부/JavaScript' Related Articles more
Comments