티스토리 뷰

development/html javascript CSS

[JavaScript] this 복습하기 / EventListener에서의 this

Happyoon ~ 2021. 10. 19. 13:20
728x90
반응형

예제1

select를 선택했을 때 선택한 아이템을 p에 출력하기

<!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>Step09_example5.html</title>
</head>
<body>
    <label for="one">선택</label>
    <select id="one">
        <option value="0">가위</option>
        <option value="1">바위</option>
        <option value="2">보</option>
    </select>
    <p id = "result">가위</p>
    <script>
        /*
        select를 선택했을 때 선택한 아이템을 p요소에 출력하는 프로그래밍을 해보세요.
        */
        let selection = document.querySelector("#one");

        selection.addEventListener("change",function(){
            document.querySelector("#result").innerText = selection[this.value].innerText;
        });
        
    </script>
    
</body>
</html>

 

 

이 문제에서는 앞에서 배운 this를 활용했다 .

selection.addEventListener("change",function(){
            document.querySelector("#result").innerText = selection[this.value].innerText;
});

여기서 this는 change 이벤트가 일어난 '바로 그' 객체'이므로 여기에서는 선택된 option 태그임을 확인할 수 있다.

 

 

 

예제2

select를 선택했을 때 선택한 아이템에 해당하는 가위, 바위, 보 이미지 div에 출력하기

<!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>Step09_example6.html</title>

    <style>
        img{
            width:200px;
        }
    </style>
</head>
<body>
    <label for="one">선택</label>
    <select id="one">
        <option value="0">가위</option>
        <option value="1">바위</option>
        <option value="2">보</option>
    </select>
    <div id = "result">  
        <img src="images/scissor.jpg" alt="초기세팅">
    </div>
    
    <script>
        /*
            select를 선택했을 때 선택한 아이템에 해당하는 가위, 바위, 보 이미지를 
            div에 출력해보세요.
        */
       //id가 one인 요소에 change이벤트가 일어났을 때 실행할 함수 등록
        document.querySelector("#one").addEventListener("change",function(){
            //선택한 value 값을 읽어와서 number type으로 만들기
            let idx = Number(this.value);
            //배열에 미리 src에 해당하는 부분의 문자열을 준비해서 넣어 놓고 
            let arr = ['images/scissor.jpg','images/rock.jpg','images/paper.jpg'];
            
            //src 부분을 변수에 담기
            let img_src = arr[idx];
            //문자열 합성으로 html 형식으로 만들기
            let img = `<img src =${img_src}>`;
            //innnerHTMl을 활용하여 코드 삽입하기 
            document.querySelector("#result").innerHTML = img;
            

        });
    </script>
    
</body>
</html>

 

예제1과 비슷한데 이미치를 출력하는 문제이다. 

이 코드에서 사용한 this를 살펴보자.

 

 

//id가 one인 요소에 change이벤트가 일어났을 때 실행할 함수 등록
        document.querySelector("#one").addEventListener("change",function(){
            //선택한 value 값을 읽어와서 number type으로 만들기
            let idx = Number(this.value);
            //배열에 미리 src에 해당하는 부분의 문자열을 준비해서 넣어 놓고 
            let arr = ['images/scissor.jpg','images/rock.jpg','images/paper.jpg'];
            
            //src 부분을 변수에 담기
            let img_src = arr[idx];
            //문자열 합성으로 html 형식으로 만들기
            let img = `<img src =${img_src}>`;
            //innnerHTMl을 활용하여 코드 삽입하기 
            document.querySelector("#result").innerHTML = img;
            

		});

이 코드에서도 this에 해당하는 것은 change 이벤트가 일어난 객체임을 알 수 있다.

 

 

예제3

이벤트리스너와 this에 관하여 

<!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>Step11_review2.html</title>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>

    <script>
        let car1 = {
            name:"소나타",
            drive:function(){
                //함수 안에서 this는 자신을 포함하는 객체의 참조값
                console.log(this.name+"이(가) 달려요.");
            }
        };
        let divs = document.querySelectorAll("div");
        
        divs.forEach(function(item,index){

        });


        for(let i =0;i<divs.length;i++){
            divs[i].addEventListener("click",function(){
                //여기서 this는 "click"이벤트가 일어난 바로 그 객체
                this.innerText = "clicked";
            });
        }
        
        //어떤 div 객체는 다음과 같은 구조를 가질 것이다
        //그러면 listenr함수가 div에 속해있기 때문에 this는 이 div가 될 것이다.
        /*let div = {
            addEventListener:function(eventName, listener){
                listener();
        }};*/

    </script>
</body>
</html>

이벤트리스너 내의 this는, 이벤트가 일어난 '바로 그' 객체라고 위에서도 설명했다.

 

자세한 이유는 다음과 같다.

        //어떤 div 객체는 다음과 같은 구조를 가질 것이다
        //그러면 listenr함수가 div에 속해있기 때문에 this는 이 div가 될 것이다.
        /*let div = {
            addEventListener:function(eventName, listener){
                listener();
        }};*/

위의 코드에서 보면 결국 addEventListener 함수는 div에 속해있는 구조라 생각할 수 있다.

따라서, 자신이 포함되어있는 객체를 가리키므로, addEventListener가 일어날 때의 this는 해당 div임을 확인할 수 있다.

 

 

반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] Canvas 활용하기  (0) 2021.10.26
[JavaScript] JSON / JSON.parse(), JSON.stringify()  (0) 2021.10.19
[JavaScript] Math 객체 활용하기 / ceil(), round(), floor(), random()  (0) 2021.10.19
[JavaScript] setInterval() 주기마다 반복 작업 시행 method  (0) 2021.10.15
[JavaScript] setTimeout() 시간 지연시켜 작업 수행 method  (0) 2021.10.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함